diff --git a/quiz_hp/css/style.css b/quiz_hp/css/style.css new file mode 100644 index 0000000..b84b931 --- /dev/null +++ b/quiz_hp/css/style.css @@ -0,0 +1,207 @@ +body { + background: #008854; +} + +* { + padding: 0px; + margin: 0px; + box-sizing: border-box; +} + + + +.main-section { + background: transparent; + max-width: 700px; + width: 90%; + height: 500px; + margin: 150px auto; + border-radius: 10px; +} + +.quiz-holder { + background: #e6e4e4; + width: 100%; + margin: 30px auto; + padding: 10px; + border-radius: 5px; + +} + +.question-counter { + font-size: 16px; + font-family: sans-serif; + float: right; + color: #555; +} + +.question { + font-size: 20px; + font-family: sans-serif; + margin: 20px 10px; + font-weight: 300; + margin-top: 40px; + color: #000000; + line-height: 33px; +} + +.m-chooses li { + list-style: none; + padding: 25px 10px; + font-size: 16px; + font-family: sans-serif; + margin: 5px 0px; + color: #000000; + cursor: pointer; + box-shadow: 0 2px 2px 0#ccc, 0 2px 2px 0 #cccc; +} + +.m-chooses li:hover { + background: #eee; +} + +.m-chooses li span { + font-weight: 600; + padding: 0px 10px; +} + +.m-chooses li i { + float: right; +} + +.btn-ctrl { + margin-top: 50px; + padding: 10px 5px; +} + +.btn-ctrl::after { + content: ''; + display: block; + clear: both; + cursor: pointer; +} + +.btn-ctrl button { + padding: 10px 30px; + border: none; + float: right; + background: #007447; + color: #fff; + border-radius: 5px; + font-size: 18px; +} + +.btn-ctrl button:hover { + opacity: .9; + box-shadow: 0 2px 2px 0#ccc, 0 2px 2px 0 #cccc; + +} + +/* good result */ +.g-result h4 { + text-align: center; + font-size: 35px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-weight: 100; +} + +.g-result .g-text { + color: #27AE60; + font-size: 20px; +} + +.g-circle { + width: 300px; + height: 300px; + color: #27AE60; + line-height: 300px; + margin: 30px auto; + border: 4px solid #27AE60; + border-radius: 50%; + text-align: center; + font-size: 75px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-weight: 100; +} + +/* good ~ bad result */ +.m-result h4 { + text-align: center; + font-size: 35px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-weight: 100; +} + +.m-result .m-text { + color: #F39C12; + font-size: 20px; +} + +.m-circle { + width: 300px; + height: 300px; + color: #F39C12; + line-height: 300px; + margin: 30px auto; + border: 4px solid#F39C12; + border-radius: 50%; + text-align: center; + font-size: 75px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-weight: 100; +} + +/* bad result */ +.b-result h4 { + text-align: center; + font-size: 35px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-weight: 100; +} + +.b-result .b-text { + color: #C0392B; + font-size: 20px; +} + +.b-circle { + width: 300px; + height: 300px; + color: #C0392B; + line-height: 300px; + margin: 30px auto; + border: 4px solid #C0392B; + border-radius: 50%; + text-align: center; + font-size: 75px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-weight: 100; +} + +footer { + width: 100%; + background: #e6e4e4; + margin: 30px auto; + padding: 10px; + border-radius: 5px; +} + +footer h2 { + color: #777; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-weight: 180; + text-align: center; +} + +.footer-links { + padding: 10px 0px; + text-align: center; +} + +.footer-links a { + color: #004700; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-weight: 400; + text-align: center; + padding: 0px 5px; +} \ No newline at end of file diff --git a/quiz_hp/index.html b/quiz_hp/index.html new file mode 100644 index 0000000..7fbf31b --- /dev/null +++ b/quiz_hp/index.html @@ -0,0 +1,28 @@ + + + + + + + Quiz HP + + + + +
+
+
+ +
+ + + + + + diff --git a/quiz_hp/js/app.js b/quiz_hp/js/app.js new file mode 100644 index 0000000..ca940da --- /dev/null +++ b/quiz_hp/js/app.js @@ -0,0 +1,114 @@ +var correctAnswer = 0; +var quizHolder = document.getElementById("quizHolder"); + +function render(n) { + quizHolder.innerHTML = ` + ${data[n].id} of ${ + data.length + } +

${data[n].question}

+ +
+ +
+ `; +} + +var cA = 0; +var userAnswered = false; + +function checkAnswer(userAnswer, tag, n) { + var nextBtn = document.getElementById("nextBtn"); + var corectTag; + if (cA == 0) { + if (userAnswer == data[n].answer) { + correctAnswer++; + tag.style.background = "#75DDA1"; + tag.style.color = "#fff"; + tag.getElementsByTagName("i")[0].innerHTML += "Correct"; + cA++; + nextBtn.style.background = "#4CAF50"; + userAnswered = true; + + console.log(correctAnswer); + } else { + tag.style.background = "#F09289"; + tag.style.color = "#fff"; + tag.getElementsByTagName("i")[0].innerHTML += "Wrong"; + + corectTag = tag.parentElement.getElementsByTagName("li")[ + data[n].answer - 1 + ]; + corectTag.getElementsByTagName("i")[0].innerHTML += "Correct"; + + corectTag.style.background = "#75DDA1"; + corectTag.style.color = "#fff"; + nextBtn.style.background = "#4CAF50"; + userAnswered = true; + cA++; + } + } +} + +function nextQuestion(n) { + var num = n + 1; + var nextBtn = document.getElementById("nextBtn"); + nextBtn.style.background = "#ccc"; + + if (userAnswered == false) return 0; + if (num < data.length) { + cA = 0; + userAnswered = false; + render(num); + } else { + + // result + resultFunc(); + } +} + +function resultFunc() { + if (correctAnswer / data.length >= 3 / 4) { + quizHolder.innerHTML = ` +
+

Your Result

+

Very Good , you are a big fan of HP !

+
+ ${correctAnswer} / ${data.length} +
+
+ `; + } else if (correctAnswer / data.length >= 1 / 2) { + quizHolder.innerHTML = ` +
+

Your Result

+

Hmm it's good , but go look hp movies and book !

+
+ ${correctAnswer} / ${data.length} +
+
+ `; + } else { + quizHolder.innerHTML = ` +
+

Your Result

+

Very bad , go to Azkaban >:(

+
+ ${correctAnswer} / ${data.length} +
+ `; + } +} diff --git a/quiz_hp/js/data.js b/quiz_hp/js/data.js new file mode 100644 index 0000000..97e8f59 --- /dev/null +++ b/quiz_hp/js/data.js @@ -0,0 +1,93 @@ +var data = [ + { + id: 1, + question: "Who were Harry's parents?", + a: "Henry and Maggie Potter", + b: "William and Elizabeth Potter", + c: "James and Lily Potter", + d: "Voldemort", + answer: 3 + }, + { + id: 2, + question: "In order of birth, who are the seven Weasley siblings?", + a: "Percy, Bill, George, Charlie, Fred, Ron, Ginny", + b: "George, Fred, Percy, Bill, Charlie, Ron, Ginny", + c: "Bill, Charlie, Percy, Fred, George, Ron, Ginny", + d: "Charlie, Bill, Percy, Fred, George, Ron, Ginny", + answer: 3 + }, + { + id: 3, + question: "What are the three Unforgivable Curses?", + a: "Impedimenta, Incarcerous and Incendio", + b: "Avada Kedavra, Crucio and Imperio", + c: "Expelliarmus, Expecto Patronum and Diffindo", + d: "Rictusempra, Crucio and Flipendo", + answer: 2 + }, + { + id: 4, + question: "Which of these Hogwarts professors teaches Transfiguration?", + a: "Snape", + b: "Sprout", + c: "McGonagall", + d: "Voldemort", + answer: 3 + }, + { + id: 5, + question: "At the end of Harry Potter and the Sorcerer's Stone, which professor removes his turban to reveal Voldemort on the back of his head?", + a: "Quirrel", + b: "Snape", + c: "Lockhart", + d: "Hagrid", + answer: 1 + }, + { + id: 6, + question: "Who first shows Harry the diary of Tom Riddle?", + a: "Moaning Myrtle", + b: "Nearly Headless Nick", + c: "Ethernet", + d: "Fawkes", + answer: 1 + }, + + { + id: 7, + question: "Who was Tom Marvolo Riddle?", + a: "Harry's Father", + b: "Harry's Mother", + c: "Sirius Black", + d: "Voldemort", + answer: 4 + }, + { + id: 8, + question: "What's the only book in the Harry Potter series that doesn't feature Lord Voldemort?", + a: "The Sorcerer's Stone", + b: "The Prisoner of Azkaban", + c: "The Deathly Hallows", + d: "IDK", + answer: 2 + }, + { + id: 9, + question: "Who was the Prisoner of Azkaban, and was he guilty of the crime he was accused of committing?", + a: "James Potter and not guilty", + b: "Cornelius Fudge and guilty", + c: "Sirius Black and not guilty", + d: "Rubeus Hagrid and guilty", + answer: 3 + }, + { + id: 10, + question: "Who is the Half-Blood Prince?", + a: "Voldemort", + b: "Dumbledore", + c: "Severus Snape", + d: "Owl of Harry", + answer: 3 + } +]; \ No newline at end of file