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 00000000..4cd8dc75 Binary files /dev/null and b/Quiz App/code/images/favicon.png differ 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..c376cce0 --- /dev/null +++ b/Quiz App/code/index.html @@ -0,0 +1,95 @@ + + + + + + + + + + + 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..e5cc8ceb --- /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(".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_page").style.display = "flex"; +} + +exit_btn.onclick = () => { + window.location.reload(); +} + +continue_btn.onclick = () => { + document.querySelector(".info_page").style.display = "none"; + document.querySelector(".quiz_page").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_page").style.display = "none"; + document.querySelector(".quiz_page").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_page").style.display = "none"; + document.querySelector(".result_page").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..797122c0 --- /dev/null +++ b/Quiz App/code/style.css @@ -0,0 +1,595 @@ +@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_page { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + display: none; +} +.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; + position: relative; +} +.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: -3%; +} +.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: 18%; +} +.info_box .buttons{ + position: absolute; + bottom: 3%; + 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_page { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + display: none; +} +.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: relative; +} +.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; +} +.time_line{ + height: 3px; + width: 95%; + border-radius: 10px; + transform: translate(0px, 34px); + 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; + font-size: 20px; + background: #fff; +} +.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_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); + border-radius: 20px; + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: space-between; + padding: 30px; +} +.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: 10px 10px 10px 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: 15px 0; + 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; + } + .time_line { + transform: translate(5px, 32px); + } + .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: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; + 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