diff --git a/Updated webD-kviz-app/Dark/README.md b/Dark/README.md similarity index 100% rename from Updated webD-kviz-app/Dark/README.md rename to Dark/README.md diff --git a/Updated webD-kviz-app/Dark/end.html b/Dark/end.html similarity index 93% rename from Updated webD-kviz-app/Dark/end.html rename to Dark/end.html index f51fe06..369bb3c 100644 --- a/Updated webD-kviz-app/Dark/end.html +++ b/Dark/end.html @@ -30,7 +30,7 @@

Play Again Go Home - Change Theme + Change Theme diff --git a/Updated webD-kviz-app/Dark/end.js b/Dark/end.js similarity index 100% rename from Updated webD-kviz-app/Dark/end.js rename to Dark/end.js diff --git a/Updated webD-kviz-app/Dark/game.css b/Dark/game.css similarity index 89% rename from Updated webD-kviz-app/Dark/game.css rename to Dark/game.css index 81d758d..e8d1504 100644 --- a/Updated webD-kviz-app/Dark/game.css +++ b/Dark/game.css @@ -81,7 +81,13 @@ background-color: #56a5eb; width: 0%; } - +#display{ + border:2px solid black; + border-radius: 5px; + width:100%; + margin-bottom:2px; + display:block; +} /* LOADER */ #loader { border: 1.6rem solid white; @@ -158,3 +164,9 @@ footer{ position: relative; color: white; } +.next_btn:hover { + cursor: pointer; + box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); + transform: translateY(-0.1rem); + transition: transform 150ms; +} \ No newline at end of file diff --git a/Updated webD-kviz-app/Dark/game.html b/Dark/game.html similarity index 97% rename from Updated webD-kviz-app/Dark/game.html rename to Dark/game.html index 62d0689..eec8d49 100644 --- a/Updated webD-kviz-app/Dark/game.html +++ b/Dark/game.html @@ -55,7 +55,7 @@

diff --git a/Updated webD-kviz-app/Dark/game.js b/Dark/game.js similarity index 100% rename from Updated webD-kviz-app/Dark/game.js rename to Dark/game.js diff --git a/Updated webD-kviz-app/Light/highscore.css b/Dark/highscore.css similarity index 91% rename from Updated webD-kviz-app/Light/highscore.css rename to Dark/highscore.css index 3b1548b..df0e989 100644 --- a/Updated webD-kviz-app/Light/highscore.css +++ b/Dark/highscore.css @@ -13,5 +13,5 @@ transform: scale(1.025); } #finalScore{ - font-size: 10vw; + text-align: center; } diff --git a/Updated webD-kviz-app/Light/highscore.html b/Dark/highscore.html similarity index 90% rename from Updated webD-kviz-app/Light/highscore.html rename to Dark/highscore.html index 54e3068..c2fd9dc 100644 --- a/Updated webD-kviz-app/Light/highscore.html +++ b/Dark/highscore.html @@ -14,7 +14,7 @@

High Scores

Go Home - Change Theme + Change Theme diff --git a/Updated webD-kviz-app/Dark/highscore.js b/Dark/highscore.js similarity index 100% rename from Updated webD-kviz-app/Dark/highscore.js rename to Dark/highscore.js diff --git a/Updated webD-kviz-app/Dark/index.html b/Dark/index.html similarity index 100% rename from Updated webD-kviz-app/Dark/index.html rename to Dark/index.html diff --git a/Updated webD-kviz-app/Dark/kviz-1 (9).png b/Dark/kviz-1 (9).png similarity index 100% rename from Updated webD-kviz-app/Dark/kviz-1 (9).png rename to Dark/kviz-1 (9).png diff --git a/Updated webD-kviz-app/Dark/logo-kviz.jpg b/Dark/logo-kviz.jpg similarity index 100% rename from Updated webD-kviz-app/Dark/logo-kviz.jpg rename to Dark/logo-kviz.jpg diff --git a/Updated webD-kviz-app/Dark/sounds/correctAns.mp3 b/Dark/sounds/correctAns.mp3 similarity index 100% rename from Updated webD-kviz-app/Dark/sounds/correctAns.mp3 rename to Dark/sounds/correctAns.mp3 diff --git a/Updated webD-kviz-app/Dark/sounds/wrongAns.mp3 b/Dark/sounds/wrongAns.mp3 similarity index 100% rename from Updated webD-kviz-app/Dark/sounds/wrongAns.mp3 rename to Dark/sounds/wrongAns.mp3 diff --git a/Updated webD-kviz-app/Dark/style.css b/Dark/style.css similarity index 100% rename from Updated webD-kviz-app/Dark/style.css rename to Dark/style.css diff --git a/Updated webD-kviz-app/Light/README.md b/Light/README.md similarity index 100% rename from Updated webD-kviz-app/Light/README.md rename to Light/README.md diff --git a/Updated webD-kviz-app/Light/end.html b/Light/end.html similarity index 93% rename from Updated webD-kviz-app/Light/end.html rename to Light/end.html index f51fe06..d1cf334 100644 --- a/Updated webD-kviz-app/Light/end.html +++ b/Light/end.html @@ -30,7 +30,7 @@

Play Again Go Home - Change Theme + Change Theme diff --git a/Updated webD-kviz-app/Light/end.js b/Light/end.js similarity index 100% rename from Updated webD-kviz-app/Light/end.js rename to Light/end.js diff --git a/Updated webD-kviz-app/Light/game.css b/Light/game.css similarity index 93% rename from Updated webD-kviz-app/Light/game.css rename to Light/game.css index b7e80c1..0109ee3 100644 --- a/Updated webD-kviz-app/Light/game.css +++ b/Light/game.css @@ -169,3 +169,9 @@ footer{ color: white; } +.next_btn:hover { + cursor: pointer; + box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); + transform: translateY(-0.1rem); + transition: transform 150ms; +} \ No newline at end of file diff --git a/game.html b/Light/game.html similarity index 94% rename from game.html rename to Light/game.html index 0dc11c5..2a63253 100644 --- a/game.html +++ b/Light/game.html @@ -31,7 +31,7 @@

-

Question

+

A

@@ -48,11 +48,9 @@

Question

D

-

Correct option :

- - +
diff --git a/Updated webD-kviz-app/Light/highscore.js b/Light/highscore.js similarity index 100% rename from Updated webD-kviz-app/Light/highscore.js rename to Light/highscore.js diff --git a/Updated webD-kviz-app/Light/index.html b/Light/index.html similarity index 100% rename from Updated webD-kviz-app/Light/index.html rename to Light/index.html diff --git a/Updated webD-kviz-app/Light/kviz-1 (8).png b/Light/kviz-1 (8).png similarity index 100% rename from Updated webD-kviz-app/Light/kviz-1 (8).png rename to Light/kviz-1 (8).png diff --git a/Updated webD-kviz-app/Light/logo-kviz.jpg b/Light/logo-kviz.jpg similarity index 100% rename from Updated webD-kviz-app/Light/logo-kviz.jpg rename to Light/logo-kviz.jpg diff --git a/Updated webD-kviz-app/Light/sounds/correctAns.mp3 b/Light/sounds/correctAns.mp3 similarity index 100% rename from Updated webD-kviz-app/Light/sounds/correctAns.mp3 rename to Light/sounds/correctAns.mp3 diff --git a/Updated webD-kviz-app/Light/sounds/wrongAns.mp3 b/Light/sounds/wrongAns.mp3 similarity index 100% rename from Updated webD-kviz-app/Light/sounds/wrongAns.mp3 rename to Light/sounds/wrongAns.mp3 diff --git a/Updated webD-kviz-app/Light/style.css b/Light/style.css similarity index 100% rename from Updated webD-kviz-app/Light/style.css rename to Light/style.css diff --git a/README.md b/README.md index 6c93a2c..39b0f9c 100644 --- a/README.md +++ b/README.md @@ -15,33 +15,29 @@ This is a quiz platform This Application contains the following added features: - Has a timer for every quiz question. -- Has both light and dark theme options. +- Has both light and dark themes options. +- Has its own logo that I have designed. - Has different/changed background color. - Has got a Next button to navigate to the upcoming question. -Contribution period ends: 28 January 2024 +## Issues -## ☃️ Prizes -- Top 3 contributors ❄️
-Special prize | Bonanza Swag Kits | Shoutouts on Social Media handles | Certificate of appreciation +Addressing to the respective issues of the repository: +- Issue # 9 +- Issue # 2 +- Issue # 1 +- Issue # 16 +- Issue # 19 -- Top 5 female contributors ❄️
-Special prize | Special Swag Kits | Shoutouts on Social Media handles | Certificate of appreciation +## Demo -- Top 10 contributors ❄️
-Shoutouts on Social Media handles | Swag kits and lots of exciting goodies | Certificate of appreciation +Demo Video: -- Top 25 contributors ❄️
-Swag kits and lots of exciting goodies | Certificate of appreciation -- All the contributors will get a certificate of appreciation for their first successful pull request :) -### ☃️ For Contributors that identify as women -- Mention your pronouns in the profile to be eligible for the women-only prizes. - - -Join our [Discord](https://discord.gg/xTNC4MGB) to stay in touch with project mentors and for any furthur questions. +https://user-images.githubusercontent.com/98908906/206414690-4c8a9f10-3130-4741-9dc4-4fa05fd490f3.mp4 +Please refer to the above video for demo. diff --git a/Updated webD-kviz-app/Dark/highscore.css b/Updated webD-kviz-app/Dark/highscore.css deleted file mode 100644 index 3b1548b..0000000 --- a/Updated webD-kviz-app/Dark/highscore.css +++ /dev/null @@ -1,17 +0,0 @@ -#highScoresList { - list-style: none; - padding-left: 0; - margin-bottom: 4rem; - } - - .high-score { - font-size: 2.8rem; - margin-bottom: 0.5rem; - } - - .high-score:hover { - transform: scale(1.025); - } - #finalScore{ - font-size: 10vw; - } diff --git a/Updated webD-kviz-app/Light/game.html b/Updated webD-kviz-app/Light/game.html deleted file mode 100644 index 62d0689..0000000 --- a/Updated webD-kviz-app/Light/game.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - - Game-play - - - - -
-
- -
- - - diff --git a/Updated webD-kviz-app/Light/sounds/gametheme.mp3 b/Updated webD-kviz-app/Light/sounds/gametheme.mp3 deleted file mode 100644 index 070fb0e..0000000 Binary files a/Updated webD-kviz-app/Light/sounds/gametheme.mp3 and /dev/null differ diff --git a/Updated webD-kviz-app/Main Page.html b/Updated webD-kviz-app/Main Page.html deleted file mode 100644 index 36c8dac..0000000 --- a/Updated webD-kviz-app/Main Page.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - Kviz: A quiz app - - - -
-
-
-
- -
-

Kviz

- -
-
- - diff --git a/Updated webD-kviz-app/README.md b/Updated webD-kviz-app/README.md deleted file mode 100644 index 4c2c3a7..0000000 --- a/Updated webD-kviz-app/README.md +++ /dev/null @@ -1,43 +0,0 @@ - -# webD-kviz-app with Resolved Issues - -A brief description of the changes that I have done in this project -and the respective issues they address. - - -## Contributer - -- [@SoumyaJindal](https://github.com/soumyajindal0707) - - -## Features - -This Application contains the following added features: - -- Has a timer for every quiz question. -- Has both light and dark themes options. -- Has its own logo that I have designed. -- Has different/changed background color. -- Has got a Next button to navigate to the upcoming question. - -## Issues - -Addressing to the respective issues of the repository: -- Issue # 9 -- Issue # 2 -- Issue # 1 -- Issue # 16 -- Issue # 19 - -## Demo - -Demo Video: - - - - -https://user-images.githubusercontent.com/98908906/206414690-4c8a9f10-3130-4741-9dc4-4fa05fd490f3.mp4 - - - -Please refer to the above video for demo. diff --git a/Updated webD-kviz-app/style.css b/Updated webD-kviz-app/style.css deleted file mode 100644 index 538a3e0..0000000 --- a/Updated webD-kviz-app/style.css +++ /dev/null @@ -1,142 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Sono:wght@400;600&display=swap'); - -:root { - background: linear-gradient(to right, #638694, #005d7b); - font-size: 62.5%; - filter: invert(0); -} - -* { - box-sizing: border-box; - font-family: "Sono"; - margin: 0; - padding: 0; - color: #333; -} - -#icon img{ - height: 120px; -} - -h1, -h2, -h3, -h4 { - margin-bottom: 1rem; -} - -h1 { - font-size: 7rem; - color: #d6eced; - margin-bottom: 1rem; - font-weight: 600; -} - -h1 > span { - font-size: 2.4rem; - font-weight: 500; -} - -h2 { - font-size: 4.2rem; - margin-bottom: 4rem; - font-weight: 700; -} - -h3 { - font-size: 2.8rem; - font-weight: 500; -} - -/* UTILITIES */ - -.container { - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - max-width: 80rem; - margin: 0 auto; - padding: 0rem; - padding-left: 1rem; - padding-right: 1rem; -} - -.container > * { - width: 100%; -} - -.flex-row { - display: flex; - flex-direction: row; -} - -.flex-column { - display: flex; - flex-direction: column; -} - -.flex-center { - justify-content: center; - align-items: center; -} - -.justify-center { - justify-content: center; -} - -.text-center { - text-align: center; -} - -.hidden { - display: none; -} - -/* BUTTONS */ -.btn { - font-size: 1.8rem; - padding: 1rem 0; - width: 20rem; - text-align: center; - border: 0.1rem solid #004644; - margin-bottom: 1rem; - text-decoration: none; - color: #004644; - background-color: rgb(235, 244, 253); -} - -.btn:hover { - cursor: pointer; - box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); - transform: translateY(-0.1rem); - transition: transform 150ms; -} - -.btn[disabled]:hover { - cursor: not-allowed; - box-shadow: none; - transform: none; -} - -/* FORMS */ -form { - width: 100%; - display: flex; - flex-direction: column; - align-items: center; -} - -input { - margin-bottom: 1rem; - width: 20rem; - padding: 1.5rem; - font-size: 1.8rem; - border: none; - box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5); -} - -input::placeholder { - color: #aaa; -} \ No newline at end of file diff --git a/Updated webD-kviz-app/kviz-1 (5).png b/assets/kviz.png similarity index 100% rename from Updated webD-kviz-app/kviz-1 (5).png rename to assets/kviz.png diff --git a/logo-kviz.jpg b/assets/logo-kviz.jpg similarity index 100% rename from logo-kviz.jpg rename to assets/logo-kviz.jpg diff --git a/end.html b/end.html deleted file mode 100644 index 7b84cf7..0000000 --- a/end.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - Congrats! - - - - -
-
-

-
- - -
- Play Again - Go Home -
-
- -
- -
- - - - - \ No newline at end of file diff --git a/end.js b/end.js deleted file mode 100644 index b59002f..0000000 --- a/end.js +++ /dev/null @@ -1,29 +0,0 @@ -const username = document.getElementById('username'); -const saveScoreBtn = document.getElementById('saveScoreBtn'); -const finalScore = document.getElementById('finalScore'); -const mostRecentScore = localStorage.getItem('mostRecentScore'); - -const highScores = JSON.parse(localStorage.getItem('highScores')) || []; - -const MAX_HIGH_SCORES = 5; - -finalScore.innerText = mostRecentScore; - -username.addEventListener('keyup', () => { - saveScoreBtn.disabled = !username.value; -}); - -saveHighScore = (e) => { - e.preventDefault(); - - const score = { - score: mostRecentScore, - name: username.value, - }; - highScores.push(score); - highScores.sort((a, b) => b.score - a.score); - highScores.splice(5); - - localStorage.setItem('highScores', JSON.stringify(highScores)); - window.location.assign('index.html'); -}; \ No newline at end of file diff --git a/game.css b/game.css deleted file mode 100644 index 788af26..0000000 --- a/game.css +++ /dev/null @@ -1,134 +0,0 @@ -.choice-container { - display: flex; - margin-bottom: 0.5rem; - width: 100%; - font-size: 1.8rem; - border: 0.1rem solid rgb(86, 165, 235, 0.25); - background-color: white; - position: relative; - top: 1em; -} - -.choice-container:hover { - cursor: pointer; - box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); - transform: translateY(-0.1rem); - transition: transform 150ms; -} - -.choice-prefix { - padding: 1.5rem 2.5rem; - background-color: #56a5eb; - color: white; -} - -.choice-text { - padding: 1.5rem; - width: 100%; - font-weight: 600; -} - -.correct { - background-color: #28a745; -} - -.incorrect { - background-color: #dc3545; -} - -/* HUD */ - -#hud { - display: flex; - justify-content: space-between; - position: relative; - bottom: 6em; -} - -.hud-prefix { - text-align: center; - font-size: 2rem; - margin-top: 5rem; -} - -.hud-main-text { - text-align: center; -} - -#progressBar { - width: 20rem; - height: 4rem; - border: 0.3rem solid #56a5eb; - margin-top: 3rem; -} - -#progressBarFull { - height: 3.4rem; - background-color: #56a5eb; - width: 0%; -} -#display{ - border:2px solid black; - border-radius: 5px; - width:100%; - margin-bottom:2px; - display:block; -} -/* LOADER */ -#loader { - border: 1.6rem solid white; - border-radius: 50%; - border-top: 1.6rem solid #56a5eb; - width: 12rem; - height: 12rem; - animation: spin 2s linear infinite; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -#question { - margin-bottom: 0px; - position: relative; - bottom: 0.8em; -} - -@media screen and (max-width: 600px) { - .container { - padding: 20px; - } - #hud { - position: relative; - bottom: 6em; - } - #question { - position: relative; - bottom: 1em; - } - .choice-container { - position: relative; - top: 1em; - } -} -@media screen and (max-width: 1024px) { - .container { - padding: 40px; - } - #hud { - position: relative; - bottom: 6em; - } - #question { - position: relative; - bottom: 1em; - } - .choice-container { - position: relative; - top: 0.5em; - } -} diff --git a/highscore.html b/highscore.html deleted file mode 100644 index 24c87e0..0000000 --- a/highscore.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - High Scores - - - - - -
-
-

High Scores

-
    - Go Home -
    -
    - -
    - -
    - - - - diff --git a/highscore.js b/highscore.js deleted file mode 100644 index 9cd39ef..0000000 --- a/highscore.js +++ /dev/null @@ -1,8 +0,0 @@ -const highScoresList = document.getElementById("highScoresList"); -const highScores = JSON.parse(localStorage.getItem("highScores")) || []; - -highScoresList.innerHTML = highScores - .map(score => { - return `
  • ${score.name} - ${score.score}
  • `; - }) - .join(""); \ No newline at end of file diff --git a/index.html b/index.html index 1279364..5383ddd 100644 --- a/index.html +++ b/index.html @@ -5,29 +5,20 @@ Kviz: A quiz app + - -
    -
    -

    Kviz

    - Play - High Scores -
    +
    +
    +

    Kviz

    + +
    -
    - -
    - - - + diff --git a/sounds/correctAns.mp3 b/sounds/correctAns.mp3 deleted file mode 100644 index 5c82f39..0000000 Binary files a/sounds/correctAns.mp3 and /dev/null differ diff --git a/sounds/wrongAns.mp3 b/sounds/wrongAns.mp3 deleted file mode 100644 index 164e96e..0000000 Binary files a/sounds/wrongAns.mp3 and /dev/null differ diff --git a/style.css b/style.css index 974c3bd..9095f9e 100644 --- a/style.css +++ b/style.css @@ -1,8 +1,9 @@ @import url('https://fonts.googleapis.com/css2?family=Sono:wght@400;600&display=swap'); :root { - background: linear-gradient(to right, rgb(205, 219, 250), rgb(181, 247, 247)); + background: linear-gradient(to right, #638694, #005d7b); font-size: 62.5%; + filter: invert(0); } * { @@ -10,7 +11,11 @@ font-family: "Sono"; margin: 0; padding: 0; - color: #3083cc; + color: #333; +} + +#icon img{ + height: 120px; } h1, @@ -22,7 +27,7 @@ h4 { h1 { font-size: 7rem; - color: #3083cc; + color: #d6eced; margin-bottom: 1rem; font-weight: 600; } @@ -49,7 +54,6 @@ h3 { box-sizing: border-box; } body { - display: flex; justify-content: center; align-items: center; height: 100vh; @@ -61,9 +65,15 @@ body.dark { } .checkbox { opacity: 0; - position: relative; - margin-left: -12rem; - margin-top: 65rem; +} +.box { + z-index: 5; + margin-right: 0rem; + position: absolute; + margin-left :1333px; + top: 0; + right: 0; + margin-top: 5rem; } .label { @@ -80,14 +90,20 @@ body.dark { } .ball { + position: absolute; + cursor: pointer; + margin-top: 0.3rem; + margin-left: 0.3rem; width: 20px; height: 20px; - background-color: white; - position: absolute; - top: 2px; - left: 2px; - border-radius: 50%; - transition: transform 0.2s linear; + border-radius: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #fff; + -webkit-transition: .2s; + transition: .2s; } /* target the elemenent after the label*/ @@ -106,22 +122,28 @@ body.dark { /* UTILITIES */ .container { - width: 100vw; + width: 100vh; height: 100vh; display: flex; justify-content: center; align-items: center; max-width: 80rem; - margin: 0 auto; + margin-left: 38rem ; padding: 0rem; padding-left: 1rem; padding-right: 1rem; + z-index: -1; } .container > * { width: 100%; } +.flex-row { + display: flex; + flex-direction: row; +} + .flex-column { display: flex; flex-direction: column; @@ -150,16 +172,17 @@ body.dark { padding: 1rem 0; width: 20rem; text-align: center; - border: 0.1rem solid #56a5eb; - border-radius :25px; + border: 0.1rem solid #004644; margin-bottom: 1rem; text-decoration: none; - color: #56a5eb; + color: #004644; background-color: rgb(235, 244, 253); } .btn:hover { cursor: pointer; + color:white; + background: #56a5eb; box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); transform: translateY(-0.1rem); transition: transform 150ms; @@ -181,7 +204,7 @@ form { input { margin-bottom: 1rem; - width: 20rem; + width: 10rem; padding: 1.5rem; font-size: 1.8rem; border: none; @@ -190,4 +213,4 @@ input { input::placeholder { color: #aaa; -} \ No newline at end of file +} diff --git a/toggle.js b/toggle.js deleted file mode 100644 index af4bfb4..0000000 --- a/toggle.js +++ /dev/null @@ -1,5 +0,0 @@ -const checkbox = document.getElementById('checkbox'); - -checkbox.addEventListener('change', ()=>{ - document.body.classList.toggle('dark'); -}) \ No newline at end of file