From 8144c4a55723f1cce48db7dee2aad0f99ef584c1 Mon Sep 17 00:00:00 2001 From: Suman Date: Wed, 19 Jan 2022 15:42:47 +0530 Subject: [PATCH 1/3] added quiz app --- .vscode/settings.json | 3 + Quiz App/README.md | 6 + Quiz App/code/images/favicon.png | Bin 0 -> 19615 bytes Quiz App/code/images/image.svg | 101 ++++++ Quiz App/code/index.html | 90 +++++ Quiz App/code/script.js | 257 ++++++++++++++ Quiz App/code/style.css | 571 +++++++++++++++++++++++++++++++ 7 files changed, 1028 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 Quiz App/README.md create mode 100644 Quiz App/code/images/favicon.png create mode 100644 Quiz App/code/images/image.svg create mode 100644 Quiz App/code/index.html create mode 100644 Quiz App/code/script.js create mode 100644 Quiz App/code/style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Quiz App/README.md b/Quiz App/README.md new file mode 100644 index 00000000..6d1e523d --- /dev/null +++ b/Quiz App/README.md @@ -0,0 +1,6 @@ +## Quiz Application + +

Tech Stack Used

+

html5 css3 javascript

+ +### Preview \ No newline at end of file diff --git a/Quiz App/code/images/favicon.png b/Quiz App/code/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..4cd8dc755e909a8acc9eb99928c7ad891b95fa64 GIT binary patch literal 19615 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 IM6N<$f(q5>b^rhX literal 0 HcmV?d00001 diff --git a/Quiz App/code/images/image.svg b/Quiz App/code/images/image.svg new file mode 100644 index 00000000..215bc10b --- /dev/null +++ b/Quiz App/code/images/image.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Quiz App/code/index.html b/Quiz App/code/index.html new file mode 100644 index 00000000..9ec37687 --- /dev/null +++ b/Quiz App/code/index.html @@ -0,0 +1,90 @@ + + + + + + + + + + + Quiz App + + + + +
+
+ +
+
+

TAKE THE QUIZ

+

SEE YOUR SCORE



+ +
+
+ + +
+
Rules of this Quiz
+
+
    +
  1. You will have only 10 seconds per each question.
    2. +
  2. Once you select your answer, you can't reselect it.
    3. +
  3. You can't select any option once time goes off.
    4. +
  4. You can't exit from the quiz while you are playing.
    5. +
  5. You'll get points for your correct answers.
    6. +
+
+
+ + +
+
+ + +
+
+
Quiz Application
+
+
Time Left
+
10
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+ + +
+
+ +
+
You've completed the Quiz!
+
+ +
+
+ + +
+
+ + + + + + \ No newline at end of file diff --git a/Quiz App/code/script.js b/Quiz App/code/script.js new file mode 100644 index 00000000..8db66c04 --- /dev/null +++ b/Quiz App/code/script.js @@ -0,0 +1,257 @@ +let questions = [ + { + num: 1, + question: "What does HTML stand for?", + answer: "Hyper Text Markup Language", + options: [ + "Hyper Text Preprocessor", + "Hyper Text Markup Language", + "Hyper Text Multiple Language", + "Hyper Tool Multi Language" + ] + }, + { + num: 2, + question: "What does CSS stand for?", + answer: "Cascading Style Sheet", + options: [ + "Common Style Sheet", + "Colorful Style Sheet", + "Computer Style Sheet", + "Cascading Style Sheet" + ] + }, + { + num: 3, + question: "What does PHP stand for?", + answer: "Hypertext Preprocessor", + options: [ + "Hypertext Preprocessor", + "Hypertext Programming", + "Hypertext Preprogramming", + "Hometext Preprocessor" + ] + }, + { + num: 4, + question: "What does SQL stand for?", + answer: "Structured Query Language", + options: [ + "Stylish Question Language", + "Stylesheet Query Language", + "Statement Question Language", + "Structured Query Language" + ] + }, + { + num: 5, + question: "What does XML stand for?", + answer: "eXtensible Markup Language", + options: [ + "eXtensible Markup Language", + "eXecutable Multiple Language", + "eXTra Multi-Program Language", + "eXamine Multiple Language" + ] + } +]; + +const start_btn = document.querySelector("#start_btn"); +const info_box = document.querySelector(".info_box"); +const exit_btn = info_box.querySelector(".buttons .quit"); +const continue_btn = info_box.querySelector(".buttons .restart"); +const quiz_box = document.querySelector(".quiz_box"); +const result_box = document.querySelector(".result_box"); +const option_list = document.querySelector(".option_list"); +const time_line = document.querySelector(".header .time_line"); +const timeText = document.querySelector(".timer .time_text"); +const timeCount = document.querySelector(".timer .timer_sec"); + +start_btn.onclick = () => { + document.querySelector(".landing").style.display = "none"; + document.querySelector(".info_box").style.display = "flex"; +} + +exit_btn.onclick = () => { + window.location.reload(); +} + +continue_btn.onclick = () => { + document.querySelector(".info_box").style.display = "none"; + document.querySelector(".quiz_box").style.display = "flex"; + showQuetions(0); + queCounter(1); + startTimer(10); + startTimerLine(0); +} + +let timeValue = 10; +let que_count = 0; +let que_num = 1; +let userScore = 0; +let counter; +let counterLine; +let widthValue = 0; + +const restart_quiz = result_box.querySelector(".buttons .restart"); +const quit_quiz = result_box.querySelector(".buttons .quit"); + +restart_quiz.onclick = () => { + document.querySelector(".result_box").style.display = "none"; + document.querySelector(".quiz_box").style.display = "flex"; + + timeValue = 10; + que_count = 0; + que_num = 1; + userScore = 0; + widthValue = 0; + showQuetions(que_count); + queCounter(que_num); + clearInterval(counter); + clearInterval(counterLine); + startTimer(timeValue); + startTimerLine(widthValue); + timeText.textContent = "Time Left"; + next_btn.classList.remove("show"); +} + +quit_quiz.onclick = () => { + window.location.reload(); +} + +const next_btn = document.querySelector(".footer .next_btn"); +const bottom_ques_counter = document.querySelector(".footer .total_que"); + +next_btn.onclick = () => { + if (que_count < questions.length - 1) { + que_count++; + que_num++; + showQuetions(que_count); + queCounter(que_num); + clearInterval(counter); + clearInterval(counterLine); + startTimer(timeValue); + startTimerLine(widthValue); + timeText.textContent = "Time Left"; + next_btn.classList.remove("show"); + } else { + clearInterval(counter); + clearInterval(counterLine); + showResult(); + } +} + +function showQuetions(index) { + const que_text = document.querySelector(".que_text"); + + let que_tag = '' + questions[index].num + ". " + questions[index].question + ''; + let option_tag = '
' + questions[index].options[0] + '
' + + '
' + questions[index].options[1] + '
' + + '
' + questions[index].options[2] + '
' + + '
' + questions[index].options[3] + '
'; + que_text.innerHTML = que_tag; + option_list.innerHTML = option_tag; + + const option = option_list.querySelectorAll(".option"); + + for (i = 0; i < option.length; i++) { + option[i].setAttribute("onclick", "optionSelected(this)"); + } +} + +let tickIconTag = '
'; +let crossIconTag = '
'; + +function optionSelected(answer) { + clearInterval(counter); + clearInterval(counterLine); + let userAns = answer.textContent; + let correcAns = questions[que_count].answer; + const allOptions = option_list.children.length; + + if (userAns == correcAns) { + userScore += 1; + answer.classList.add("correct"); + answer.insertAdjacentHTML("beforeend", tickIconTag); + } else { + answer.classList.add("incorrect"); + answer.insertAdjacentHTML("beforeend", crossIconTag); + + for (i = 0; i < allOptions; i++) { + if (option_list.children[i].textContent == correcAns) { + option_list.children[i].setAttribute("class", "option correct"); + option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); + } + } + } + for (i = 0; i < allOptions; i++) { + option_list.children[i].classList.add("disabled"); + } + next_btn.classList.add("show"); +} + +function showResult() { + document.querySelector(".quiz_box").style.display = "none"; + document.querySelector(".result_box").style.display = "flex"; + + const scoreText = result_box.querySelector(".score_text"); + if (userScore > 3) { + let scoreTag = 'and congrats, You got ' + userScore + ' out of ' + questions.length + ' '; + scoreText.innerHTML = scoreTag; + } + else if (userScore > 1) { + let scoreTag = 'and nice, You got ' + userScore + ' out of ' + questions.length + ' '; + scoreText.innerHTML = scoreTag; + } + else { + let scoreTag = 'and sorry, You got only ' + userScore + ' out of ' + questions.length + ' '; + scoreText.innerHTML = scoreTag; + } +} + +function startTimer(time) { + counter = setInterval(timer, 1000); + function timer() { + timeCount.textContent = time; + time--; + if (time < 9) { + let addZero = timeCount.textContent; + timeCount.textContent = "0" + addZero; + } + if (time < 0) { + clearInterval(counter); + timeText.textContent = "Time Off"; + const allOptions = option_list.children.length; + let correcAns = questions[que_count].answer; + for (i = 0; i < allOptions; i++) { + if (option_list.children[i].textContent == correcAns) { + option_list.children[i].setAttribute("class", "option correct"); + option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); + } + } + for (i = 0; i < allOptions; i++) { + option_list.children[i].classList.add("disabled"); + } + next_btn.classList.add("show"); + } + } +} + +function startTimerLine(time) { + counterLine = setInterval(timer, 20); + function timer() { + time += 1; + if (screen.availWidth > 660) + time_line.style.width = 9 * time / 10 + "px"; + else + time_line.style.width = 6 * time / 10 + "px"; + if (time > 549) { + clearInterval(counterLine); + } + } +} + +function queCounter(index) { + let totalQueCounTag = '' + index + ' of ' + questions.length + ' Questions'; + bottom_ques_counter.innerHTML = totalQueCounTag; +} \ No newline at end of file diff --git a/Quiz App/code/style.css b/Quiz App/code/style.css new file mode 100644 index 00000000..6e66e2a1 --- /dev/null +++ b/Quiz App/code/style.css @@ -0,0 +1,571 @@ +@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Merriweather', serif;; +} +.container { + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + background: rgb(229,93,135); + background: linear-gradient(45deg, rgba(229,93,135,1) 0%, rgba(95,195,228,1) 100%); +} +.landing { + width: 85%; + height: 88%; + padding: 20px; + border-radius: 20px; + background: rgba(255,255,255,0.5); + box-shadow: 0 15px 35px rgba(255,255,255,0.05); + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} +.left img { + width: 420px; +} +.right { + color: #df5a8d; + margin-right: 80px; +} +.right .logo { + font-size: 20px; + font-weight: bold; + position: absolute; + top: 10%; + right: 10%; +} +.right h2 { + font-size: 30px; + line-height: 50px; +} +.btn { + padding: 15px 25px; + background: rgba(255,255,255,0.3); + box-shadow: 0 15px 35px rgba(255,255,255,0.05); + border-radius: 30px; + backdrop-filter: blur(10px); + border: 1px solid #df5a8d; + color: #df5a8d; + font-size: 1.3rem; + font-weight: 600; + letter-spacing: 1px; + outline: none; + cursor: pointer; + float: right; +} +.btn:hover{ + background: #df5a8d; + color: #fff; +} +.info_box{ + height: 350px; + width: 580px; + background: rgba(255,255,255,0.5); + box-shadow: 0 15px 35px rgba(255,255,255,0.05); + border-radius: 20px; + padding: 20px; + display: flex; + flex-direction: column; + position: absolute; + display: none; +} +.info_box .info-title{ + width: 90%; + padding: 15px 30px; + font-size: 1.5em; + color: #eb4283; + font-weight: 600; + background: rgba(255,255,255,0.2); + box-shadow: 0 15px 35px rgba(255,255,255,0.05); + border-radius: 15px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255,255,255,0.25); + border-top: 1px solid rgba(255,255,255,0.5); + border-left: 1px solid rgba(255,255,255,0.5); + position: absolute; + top: -6%; +} +.info_box .info-list{ + width: 96%; + padding: 30px 20px 30px 80px; + color: #eb4283; + font-size: 1.1em; + font-weight: 500; + line-height: 1.5; + list-style-position: inside; + box-shadow: 0 15px 30px rgba(255,255,255,0.1); + border-radius: 20px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.644); + border-top: 1px solid rgba(255,255,255,0.5); + border-left: 1px solid rgba(255,255,255,0.5); + position: absolute; + left: -5%; + top: 16%; +} +.info_box .buttons{ + position: absolute; + bottom: 5%; + right: 5%; + display: flex; + align-items: center; + justify-content: flex-end; +} +.info_box .buttons button{ + padding: 15px 30px; + background: #fff; + color: #eb4283; + border-radius: 20px; + border: none; + outline: none; + font-size: 18px; + font-weight: 500; + border: 1px solid #eb4283;; + box-shadow: 0 5px 10px rgba(255,255,255,0.05); + margin: 10px; + cursor: pointer; +} +.info_box .buttons button.restart{ + color: #fff; + background: #eb4283; +} +.info_box .buttons button.restart:hover{ + background: #d32f6e; +} +.info_box .buttons button.quit{ + color: #eb4283; + background: #fff; +} +.info_box .buttons button.quit:hover{ + color: #fff; + background: #eb4283; +} +.quiz_box{ + height: 450px; + width: 550px; + background: rgba(255,255,255,0.5); + box-shadow: 0 15px 35px rgba(255,255,255,0.05); + border-radius: 20px; + padding: 20px 30px; + transition: all 0.3s ease; + position: absolute; + display: none; +} +.quiz_box .header{ + width: 90%; + border-radius: 20px; + position: absolute; + padding: 0 25px; + border-radius: 20px; + backdrop-filter: blur(10px); + background: rgba(255,255,255,0.2); + box-shadow: 0 15px 35px rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.25); + border-top: 1px solid rgba(255,255,255,0.5); + border-left: 1px solid rgba(255,255,255,0.5); + display: flex; + justify-content: space-between; + align-items: center; + transform: translateY(-30px); +} +.quiz_box .header .title{ + font-size: 20px; + font-weight: 600; + color: #eb4283; +} +.quiz_box .header .timer{ + width: 150px; + color: #eb4283; + height: 45px; + margin: 5px 0; + padding: 0 10px; + display: flex; + align-items: center; + justify-content: space-between; + background: rgba(255,255,255,0.5); + border: 1px solid rgba(255,255,255,0.2); + border-radius: 10px; +} +.quiz_box .header .timer .time_text{ + font-weight: bold; + font-size: 15px; + user-select: none; +} +.quiz_box .header .timer .timer_sec{ + font-size: 20px; + font-weight: bold; + height: 30px; + width: 45px; + border-radius: 10px; + line-height: 30px; + text-align: center; + background: rgba(255,255,255,0.8); + border: 1px solid rgb(255,255,255); + user-select: none; +} +.quiz_box .header .time_line{ + height: 3px; + width: 300px; + position: absolute; + border-radius: 10px; + transform: translate(-25px, 35px); + background: #eb4283; +} +.que-box { + width: 90%; + padding: 20px 20px 10px 30px; + box-shadow: 0 15px 30px rgba(255,255,255,0.1); + border-radius: 20px; + color: #eb4283; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.644); + border-top: 1px solid rgba(255,255,255,0.5); + border-left: 1px solid rgba(255,255,255,0.5); + background: rgba(255,255,255,0.5); + position: absolute; + transform: translateY(40px); +} +.que-box .que_text{ + font-size: 24px; + font-weight: 600; +} +.que-box .option_list{ + padding: 20px 0px; + display: block; +} +.option{ + width: 480px; + border-radius: 10px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255,255,255,0.5); + box-shadow: 0 15px 35px rgba(255,255,255,0.1); + background: rgba(255,255,255,0.2); + outline: none; + padding: 10px 15px 10px 50px; + margin-bottom: 15px; + font-size: 18px; + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + position: relative; + transform: translateX(-50px); +} +.que-box .option_list .option:last-child{ + margin-bottom: 0px; +} +.que-box .option_list .option:hover{ + font-weight: bold; + background: #fff; + transform: scale(1.05); +} +.que-box .option_list .option.correct{ + color: #155724; + background: #d4edda; + border: 1px solid #c3e6cb; +} +.que-box .option_list .option.incorrect{ + color: #721c24; + background: #f8d7da; + border: 1px solid #f5c6cb; +} +.que-box .option_list .option.disabled{ + pointer-events: none; +} +.que-box .option_list .option .icon{ + height: 25px; + width: 25px; + border: 2px solid transparent; + border-radius: 50%; + text-align: center; + font-size: 15px; + line-height: 25px; +} +.option_list .option .icon.tick{ + color: #23903c; + border-color: #23903c; + background: white; +} +.option_list .option .icon.cross{ + color: red; + border-color: red; + background: white; +} +.footer{ + width: 90%; + display: flex; + flex-direction: row; + justify-content: space-between; + position: absolute; + bottom: 2%; +} +.footer .total_que span{ + color: #eb4283; + font-size: 20px; + letter-spacing: 1.5; + user-select: none; +} +.footer button{ + padding: 15px 25px; + background: #eb4283; + color: #fff; + border-radius: 30px; + border: none; + outline: none; + font-size: 1.2em; + font-weight: 500; + line-height: 10px; + border-radius: 10px; + box-shadow: 0 5px 10px rgba(255,255,255,0.05); + cursor: pointer; + opacity: 0; + pointer-events: none; + transition: all 0.3s ease; +} +.footer button.show{ + opacity: 1; + pointer-events: auto; +} +.result_box{ + background: rgba(255,255,255,0.5); + box-shadow: 0 15px 35px rgba(255,255,255,0.05); + border-radius: 20px; + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: space-between; + padding: 30px; + position: absolute; + display: none; +} +.result_box .icon{ + font-size: 100px; + color: palevioletred; + margin-bottom: 10px; +} +.result_box .text{ + font-size: 25px; + font-weight: 500; + color: #df5a8d; +} +.result_box .score_text span{ + display: flex; + margin: 10px 0; + font-size: 25px; + font-weight: 500; + color: #df5a8d; +} +.result_box .buttons{ + display: flex; + margin: 20px 0; + position: relative; +} +.result_box .buttons button{ + margin: 0 10px; + padding: 12px 20px; + font-size: 20px; + font-weight: 500; + cursor: pointer; + border: none; + outline: none; + border-radius: 20px; + border: 1px solid #df5a8d; +} +.result_box .buttons button.quit{ + color: #fff; + background: #df5a8d; +} +.result_box .buttons button.quit:hover{ + background: #df5a8d; +} +.result_box .buttons button.restart{ + color: #df5a8d; + background: #fff; +} +.result_box .buttons button.restart:hover{ + color: #fff; + background: #df5a8d; +} +@media screen and (max-width: 950px) { + .left img { + width: 350px; + } + .right { + margin-right: 30px; + } + .right h2 { + font-size: 25px; + } +} +@media screen and (max-width: 750px) { + .left img { + width: 300px; + } + .right { + margin-right: 10px; + } + .right h2 { + font-size: 23px; + } +} +@media screen and (max-width: 650px) { + .left { + display: none; + } + .right { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + margin-right: 0px; + } + .right h2 { + font-size: 30px; + } + .info_box{ + height: 300px; + width: 500px; + } + .info_box .info-title{ + padding: 12px 25px; + font-size: 1.3em; + } + .info_box .info-list{ + width: 98%; + padding: 20px 10px 20px 60px; + font-size: 1em; + left: -6%; + top: 16%; + } + .info_box .buttons{ + bottom: 5%; + } + .info_box .buttons button{ + padding: 12px 25px; + font-size: 16px; + } +} +@media screen and (max-width: 550px) { + .info_box { + height: 350px; + width: 380px; + padding: 5px 10px 5px 15px; + justify-content: space-around; + position: initial; + } + .info_box .info-title{ + padding: 0px; + font-size: 1.5em; + color: #eb4283; + font-weight: 600; + background: transparent; + box-shadow: none; + border-radius: none; + backdrop-filter: none; + border: none; + text-decoration: underline; + position: initial; + } + .info_box .info-list{ + width: 100%; + margin-left: 12px; + padding: 0px; + font-size: 1em; + list-style-position: outside; + box-shadow: none; + border-radius: none; + backdrop-filter: none; + border: none; + position: initial; + } + .info_box .buttons{ + position: initial; + } + .info_box .buttons button{ + padding: 12px 25px; + background: #fff; + color: #eb4283; + border-radius: 20px; + border: none; + outline: none; + font-size: 15px; + font-weight: 500; + border: 1px solid #eb4283; + margin: 0px 10px; + box-shadow: 0 5px 10px rgba(255,255,255,0.05); + cursor: pointer; + } + .quiz_box{ + height: 420px; + width: 380px; + padding: 20px; + } + .quiz_box .header{ + padding: 0 15px; + } + .quiz_box .header .title{ + font-size: 18px; + } + .quiz_box .header .timer{ + width: 140px; + height: 40px; + } + .quiz_box .header .timer .timer_sec{ + width: 40px; + } + .quiz_box .header .time_line{ + transform: translate(-12px, 35px); + } + .que-box{ + padding: 20px 20px 10px 20px; + } + .que-box .que_text{ + font-size: 20px; + } + .option{ + width: 350px; + padding: 10px 15px 10px 40px; + margin-bottom: 12px; + font-size: 16px; + transform: translateX(-35px); + } + .que-box .option_list .option .icon{ + height: 23px; + width: 23px; + line-height: 23px; + } + .footer{ + bottom: 2%; + } + .footer .total_que span{ + font-size: 18px; + letter-spacing: 1.1; + } + .footer button{ + padding: 12px 20px; + font-size: 1.2em; + } + .result_box { + padding: 20px 15px; + } + .result_box .icon{ + font-size: 80px; + } + .result_box .text{ + font-size: 20px; + } + .result_box .score_text span{ + font-size: 20px; + } + .result_box .buttons button{ + padding: 10px 18px; + font-size: 18px; + } +} \ No newline at end of file From 10cc39db7af534b0cd83d4b11b6cfaf0e414a474 Mon Sep 17 00:00:00 2001 From: Suman Date: Sat, 5 Feb 2022 15:24:52 +0530 Subject: [PATCH 2/3] removed vscode file --- .vscode/settings.json | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 6f3a2913..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file From f2601bc1f1fe7921bf4d2732ee4c1446e0200328 Mon Sep 17 00:00:00 2001 From: Suman Date: Thu, 10 Feb 2022 18:25:31 +0530 Subject: [PATCH 3/3] fixed timeline --- Quiz App/code/index.html | 99 +++++++++++++++++++++------------------- Quiz App/code/script.js | 16 +++---- Quiz App/code/style.css | 62 +++++++++++++++++-------- 3 files changed, 103 insertions(+), 74 deletions(-) diff --git a/Quiz App/code/index.html b/Quiz App/code/index.html index 9ec37687..c376cce0 100644 --- a/Quiz App/code/index.html +++ b/Quiz App/code/index.html @@ -25,66 +25,71 @@

SEE YOUR SCORE


-
-
Rules of this Quiz
-
-
    -
  1. You will have only 10 seconds per each question.
    2. -
  2. Once you select your answer, you can't reselect it.
    3. -
  3. You can't select any option once time goes off.
    4. -
  4. You can't exit from the quiz while you are playing.
    5. -
  5. You'll get points for your correct answers.
    6. -
-
-
- - +
+
+
Rules of this Quiz
+
+
    +
  1. You will have only 10 seconds per each question.
    2. +
  2. Once you select your answer, you can't reselect it.
    3. +
  3. You can't select any option once time goes off.
    4. +
  4. You can't exit from the quiz while you are playing.
    5. +
  5. You'll get points for your correct answers.
    6. +
+
+
+ + +
-
+ -
-
-
Quiz Application
-
-
Time Left
-
10
+
+
+
+
Quiz Application
+
+
Time Left
+
10
+
-
-
-
- -
-
- +
+
+ +
+
+ +
-
-
-
- +
+
+ +
+
-
-
+
-
-
- -
-
You've completed the Quiz!
-
- -
-
- - +
+
+
+ +
+
You've completed the Quiz!
+
+ +
+
+ + +
-
+ - \ No newline at end of file diff --git a/Quiz App/code/script.js b/Quiz App/code/script.js index 8db66c04..e5cc8ceb 100644 --- a/Quiz App/code/script.js +++ b/Quiz App/code/script.js @@ -63,13 +63,13 @@ const continue_btn = info_box.querySelector(".buttons .restart"); const quiz_box = document.querySelector(".quiz_box"); const result_box = document.querySelector(".result_box"); const option_list = document.querySelector(".option_list"); -const time_line = document.querySelector(".header .time_line"); +const time_line = document.querySelector(".time_line"); const timeText = document.querySelector(".timer .time_text"); const timeCount = document.querySelector(".timer .timer_sec"); start_btn.onclick = () => { document.querySelector(".landing").style.display = "none"; - document.querySelector(".info_box").style.display = "flex"; + document.querySelector(".info_page").style.display = "flex"; } exit_btn.onclick = () => { @@ -77,8 +77,8 @@ exit_btn.onclick = () => { } continue_btn.onclick = () => { - document.querySelector(".info_box").style.display = "none"; - document.querySelector(".quiz_box").style.display = "flex"; + document.querySelector(".info_page").style.display = "none"; + document.querySelector(".quiz_page").style.display = "flex"; showQuetions(0); queCounter(1); startTimer(10); @@ -97,8 +97,8 @@ const restart_quiz = result_box.querySelector(".buttons .restart"); const quit_quiz = result_box.querySelector(".buttons .quit"); restart_quiz.onclick = () => { - document.querySelector(".result_box").style.display = "none"; - document.querySelector(".quiz_box").style.display = "flex"; + document.querySelector(".result_page").style.display = "none"; + document.querySelector(".quiz_page").style.display = "flex"; timeValue = 10; que_count = 0; @@ -191,8 +191,8 @@ function optionSelected(answer) { } function showResult() { - document.querySelector(".quiz_box").style.display = "none"; - document.querySelector(".result_box").style.display = "flex"; + document.querySelector(".quiz_page").style.display = "none"; + document.querySelector(".result_page").style.display = "flex"; const scoreText = result_box.querySelector(".score_text"); if (userScore > 3) { diff --git a/Quiz App/code/style.css b/Quiz App/code/style.css index 6e66e2a1..797122c0 100644 --- a/Quiz App/code/style.css +++ b/Quiz App/code/style.css @@ -63,6 +63,14 @@ background: #df5a8d; color: #fff; } +.info_page { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + display: none; +} .info_box{ height: 350px; width: 580px; @@ -70,10 +78,7 @@ box-shadow: 0 15px 35px rgba(255,255,255,0.05); border-radius: 20px; padding: 20px; - display: flex; - flex-direction: column; - position: absolute; - display: none; + position: relative; } .info_box .info-title{ width: 90%; @@ -89,7 +94,7 @@ border-top: 1px solid rgba(255,255,255,0.5); border-left: 1px solid rgba(255,255,255,0.5); position: absolute; - top: -6%; + top: -3%; } .info_box .info-list{ width: 96%; @@ -107,11 +112,11 @@ border-left: 1px solid rgba(255,255,255,0.5); position: absolute; left: -5%; - top: 16%; + top: 18%; } .info_box .buttons{ position: absolute; - bottom: 5%; + bottom: 3%; right: 5%; display: flex; align-items: center; @@ -146,6 +151,14 @@ color: #fff; background: #eb4283; } +.quiz_page { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + display: none; +} .quiz_box{ height: 450px; width: 550px; @@ -154,8 +167,7 @@ border-radius: 20px; padding: 20px 30px; transition: all 0.3s ease; - position: absolute; - display: none; + position: relative; } .quiz_box .header{ width: 90%; @@ -209,12 +221,11 @@ border: 1px solid rgb(255,255,255); user-select: none; } -.quiz_box .header .time_line{ +.time_line{ height: 3px; - width: 300px; - position: absolute; + width: 95%; border-radius: 10px; - transform: translate(-25px, 35px); + transform: translate(0px, 34px); background: #eb4283; } .que-box { @@ -262,8 +273,8 @@ } .que-box .option_list .option:hover{ font-weight: bold; + font-size: 20px; background: #fff; - transform: scale(1.05); } .que-box .option_list .option.correct{ color: #155724; @@ -332,6 +343,14 @@ opacity: 1; pointer-events: auto; } +.result_page { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + display: none; +} .result_box{ background: rgba(255,255,255,0.5); box-shadow: 0 15px 35px rgba(255,255,255,0.05); @@ -342,8 +361,6 @@ align-items: center; justify-content: space-between; padding: 30px; - position: absolute; - display: none; } .result_box .icon{ font-size: 100px; @@ -456,7 +473,7 @@ .info_box { height: 350px; width: 380px; - padding: 5px 10px 5px 15px; + padding: 10px 10px 10px 15px; justify-content: space-around; position: initial; } @@ -475,6 +492,7 @@ } .info_box .info-list{ width: 100%; + margin: 15px 0; margin-left: 12px; padding: 0px; font-size: 1em; @@ -520,8 +538,8 @@ .quiz_box .header .timer .timer_sec{ width: 40px; } - .quiz_box .header .time_line{ - transform: translate(-12px, 35px); + .time_line { + transform: translate(5px, 32px); } .que-box{ padding: 20px 20px 10px 20px; @@ -536,6 +554,12 @@ font-size: 16px; transform: translateX(-35px); } + .que-box .option_list .option:hover { + font-size: 18px; + } + .que-box .option_list .option.incorrect, .option.correct { + font-size: 17px; + } .que-box .option_list .option .icon{ height: 23px; width: 23px;