From 19d238f29579f4863f0d9ddb289fb917b174a458 Mon Sep 17 00:00:00 2001 From: Mahmut Bayri Date: Sun, 26 Apr 2020 21:53:09 +0300 Subject: [PATCH] Refactor scripts --- .gitignore | 3 +- index.html | 145 ++++++++++------- script.js | 444 +++++++++++++++++++++++++++-------------------------- 3 files changed, 315 insertions(+), 277 deletions(-) diff --git a/.gitignore b/.gitignore index 496ee2c..af56f61 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.DS_Store \ No newline at end of file +.DS_Store +.idea/ diff --git a/index.html b/index.html index 55d51f3..d329ee4 100644 --- a/index.html +++ b/index.html @@ -2,77 +2,108 @@ - - Quiz DEMO - Build a New Quiz App with JavaScript (ES6) - - + + Quiz DEMO - Build a New Quiz App with JavaScript (ES6) + + - -
+
- -
-

Quiz Demo

- Test your knowledge -
+ +
+

Quiz Demo

+ Test your knowledge +
-
- -

- Quiz Time 1:30 -

- - - -
-
+
+
+ + + + + -
- - - - - - - + + + + + - - \ No newline at end of file + diff --git a/script.js b/script.js index 13be963..950e321 100644 --- a/script.js +++ b/script.js @@ -1,236 +1,242 @@ -"use stict"; -let choisesAnsData, - quizItemTemplate = "", - quizItemContainer = document.querySelector('.quiz-item-container'), - quizChoicesContainer = document.querySelector('.answer-choices-box'), - selectedAnswerResult = document.querySelector('.selected-answer-result'), - questionTitle = document.querySelector('.question-title'), - startQuiz = document.querySelector('.start-to-quiz'), - userPointBox = document.querySelector('.user-point'), - resultModal = document.querySelector('#resultModal'), - showResult = document.querySelector('#show-result'), - showResultContainer = document.querySelector('.result-container'), - timerBox = document.querySelector("#count-down"); - let allQuestionsData = [ - { - questionID: 1, - question: "Türkiye\'nin Başkenti Neresidir?", - answers: [ - { opC: "a", opT: "Ordu" }, - { opC: "b", opT: "Ankara" }, - { opC: "c", opT: "İstanbul" }, - { opC: "d", opT: "Mersin" } - ] - }, - { - questionID: 2, - question: "Ani Harabeleri Hangi İlimizdedir?", - answers: [ - { opC: "a", opT: "Zonguldak" }, - { opC: "b", opT: "Manisa" }, - { opC: "c", opT: "Nevşehir" }, - { opC: "d", opT: "Kars" } - ] - }, - { - questionID: 3, - question: "Peri Bacaları Hangi İlimizdedir?", - answers: [ - { opC: "a", opT: "Erzurum" }, - { opC: "b", opT: "Edirne" }, - { opC: "c", opT: "Kırklareli" }, - { opC: "d", opT: "Nevşehir" } - ] - }, - { - questionID: 4, - question: "Topkapı Sarayı Nerededir?", - answers: [ - { opC: "a", opT: "İstanbul" }, - { opC: "b", opT: "Antalya" }, - { opC: "c", opT: "Burdur" }, - { opC: "d", opT: "Bursa" } - ] - }, - { - questionID: 5, - question: "Türkiye Cumhuriyeti'nin Kurucusus Kimdir?", - answers: [ - { opC: "a", opT: "Kazim Karabekir" }, - { opC: "b", opT: "İsmet İnönü" }, - { opC: "c", opT: "Mustafa Kemal Atatürk" }, - { opC: "d", opT: "Mehmet Akif Ersoy" } - ] - } + { + questionID: 1, + question: "Türkiye\'nin Başkenti Neresidir?", + answers: [ + {opC: "a", opT: "Ordu"}, + {opC: "b", opT: "Ankara"}, + {opC: "c", opT: "İstanbul"}, + {opC: "d", opT: "Mersin"} + ] + }, + { + questionID: 2, + question: "Ani Harabeleri Hangi İlimizdedir?", + answers: [ + {opC: "a", opT: "Zonguldak"}, + {opC: "b", opT: "Manisa"}, + {opC: "c", opT: "Nevşehir"}, + {opC: "d", opT: "Kars"} + ] + }, + { + questionID: 3, + question: "Peri Bacaları Hangi İlimizdedir?", + answers: [ + {opC: "a", opT: "Erzurum"}, + {opC: "b", opT: "Edirne"}, + {opC: "c", opT: "Kırklareli"}, + {opC: "d", opT: "Nevşehir"} + ] + }, + { + questionID: 4, + question: "Topkapı Sarayı Nerededir?", + answers: [ + {opC: "a", opT: "İstanbul"}, + {opC: "b", opT: "Antalya"}, + {opC: "c", opT: "Burdur"}, + {opC: "d", opT: "Bursa"} + ] + }, + { + questionID: 5, + question: "Türkiye Cumhuriyeti'nin Kurucusus Kimdir?", + answers: [ + {opC: "a", opT: "Kazim Karabekir"}, + {opC: "b", opT: "İsmet İnönü"}, + {opC: "c", opT: "Mustafa Kemal Atatürk"}, + {opC: "d", opT: "Mehmet Akif Ersoy"} + ] + } ]; let correctAnswers = [ - { - questionID: 1, - correctAnswer: "b" - }, - { - questionID: 2, - correctAnswer: "d" - }, - { - questionID: 3, - correctAnswer: "d" - }, - { - questionID: 4, - correctAnswer: "d" - }, - { - questionID: 5, - correctAnswer: "c" - } + { + questionID: 1, + correctAnswer: "b" + }, + { + questionID: 2, + correctAnswer: "d" + }, + { + questionID: 3, + correctAnswer: "d" + }, + { + questionID: 4, + correctAnswer: "d" + }, + { + questionID: 5, + correctAnswer: "c" + } ]; -let selectedData = []; - -let unitePoint = 100 / allQuestionsData.length; - -function renderToData() { - allQuestionsData.map(questions => { - quizItemTemplate += `
- -
-
- ${ - questions.answers.map(items => - ` -
- - -
- ` - ).join("") - } -
-
-
`; - }); - quizItemContainer.innerHTML = quizItemTemplate; -} - -startQuiz.addEventListener("click", function () { - this.classList.toggle("d-none"); - questionTitle.style.display = "block"; - renderToData(); - timer(1, 30); -}); - -function setAnswer(id, sign, name) { - let newObj = { answerID: parseInt(id), answerSign: sign, answerName: name, correctSign: false }; - if (selectedData.filter(item => item.answerID === parseInt(id)).length === 0) { - selectedData.push(newObj); - } - else { - let answerValues = selectedData.filter(item => item.answerID === newObj.answerID)[0]; - answerValues.answerSign = sign; - answerValues.answerName = name; - answerValues.correctSign = false; - } - - correctAnswers.filter(item => item.questionID === parseInt(id)) - .filter(fin => { - if (fin.correctAnswer === sign) { - selectedData.filter(item => item.answerID === newObj.answerID)[0].correctSign = true; - } - }); - - // All questions are solved controler - selectedData.length === allQuestionsData.length ? showResultContainer.style.display = "block" : "none"; - -} - -// Show ressult fire -showResult.addEventListener("click", function () { - let selectedAnswersTemplate = ""; - selectedData.sort(function (a, b) { - return a.answerID - b.answerID; - }); - - selectedData.map(item => { - selectedAnswersTemplate += ` -
- ${item.answerID}. Question - ${item.answerSign.toUpperCase()} - ${item.correctSign === true ? "True" : "False"} - ${item.answerName} -
- `; - }); - - selectedAnswerResult.innerHTML = selectedAnswersTemplate; - - let totapPoint = selectedData.filter(trueVal => trueVal.correctSign === true).reduce((calc) => { - return calc + unitePoint; - }, 0); - - userPointBox.innerHTML = totapPoint; - - setQuestionsDisabled(); - clearInterval(timerFire); - hideAllCollapse(); -}); +(function (allQuestionsData, correctAnswers) { + "use stict"; + let quizItemContainer, + quizChoicesContainer, + selectedAnswerResult, + questionTitle, + userPointBox, + resultModal, + showResult, + showResultContainer, + timerBox; + + let selectedData = []; + let unitePoint = 100 / allQuestionsData.length; + + function init() { + // insert main conent + document.querySelector('#main-container').innerHTML = document.querySelector('#mainBodyTemplate').innerHTML; + + quizItemContainer = document.querySelector('.quiz-item-container'); + quizChoicesContainer = document.querySelector('.answer-choices-box'); + selectedAnswerResult = document.querySelector('.selected-answer-result'); + questionTitle = document.querySelector('.question-title'); + userPointBox = document.querySelector('.user-point'); + resultModal = document.querySelector('#resultModal'); + showResult = document.querySelector('#show-result'); + showResultContainer = document.querySelector('.result-container'); + timerBox = document.querySelector("#count-down"); + + // start quiz button + document.querySelector('.start-to-quiz').addEventListener("click", function () { + this.classList.toggle("d-none"); + questionTitle.style.display = "block"; + renderToData(); + timer(1, 30); + }); + } + function renderToData() { + var questionTemplate = document.querySelector('#questionTemplate').innerHTML; + var answerTemplate = document.querySelector('#answerTemplate').innerHTML; + var str = ''; + allQuestionsData.forEach(function (question) { + var questionElements = ''; + question.answers.forEach(function (answer) { + questionElements += answerTemplate + .replace(/__QUESTION_ID__/g, question.questionID) + .replace(/__opC__/g, answer.opC) + .replace(/__opT__/g, answer.opT); + }); + str += questionTemplate + .replace(/__QUESTION_ID__/g, question.questionID) + .replace(/__QUESTION_ANIMATION_DELAY__/g, parseInt(question.questionID) / 10) + .replace(/__QUESTION_NAME__/g, question.question) + .replace(/__ANSWERS__/g, questionElements); + }); + + quizItemContainer.innerHTML = str; + // event listener + eventListeners(); + } + function eventListeners() { + // radio i puts + document.querySelectorAll('input[type=radio][name="customRadio"]') + .forEach(radio => radio.addEventListener('change', () => { + setAnswer( + radio.getAttribute('data-questionID'), + radio.getAttribute('data-opC'), + radio.getAttribute('data-opT') + ); + })); + + // Show ressult fire + showResult.addEventListener("click", function () { + let selectedAnswersTemplate = document.querySelector('#results').innerHTML; + selectedData.sort(function (a, b) { + return a.answerID - b.answerID; + }); + selectedAnswerResult.innerHTML = selectedData.reduce(function (carry, item) { + return carry + selectedAnswersTemplate + .replace(/__correctSign__/g, item.correctSign === true ? "success" : "danger") + .replace(/__answerID__/g, item.answerID) + .replace(/__answerSign__/g, item.answerSign.toUpperCase()) + .replace(/__correctSignBadge__/g, item.correctSign === true ? "True" : "False") + .replace(/__answerName__/g, item.answerName); + }, ''); + + userPointBox.innerHTML = selectedData + .filter(trueVal => trueVal.correctSign === true) + .reduce((calc) => { + return calc + unitePoint; + }, 0); + + setQuestionsDisabled(); + clearInterval(timerFire); + hideAllCollapse(); + }); + } + + function setAnswer(id, sign, name) { + let newObj = {answerID: parseInt(id), answerSign: sign, answerName: name, correctSign: false}; + if (selectedData.filter(item => item.answerID === parseInt(id)).length === 0) { + selectedData.push(newObj); + } else { + let answerValues = selectedData.filter(item => item.answerID === newObj.answerID)[0]; + answerValues.answerSign = sign; + answerValues.answerName = name; + answerValues.correctSign = false; + } + + correctAnswers + .filter(item => item.questionID === parseInt(id)) + .filter(fin => { + if (fin.correctAnswer === sign) { + selectedData.filter(item => item.answerID === newObj.answerID)[0].correctSign = true; + } + }); + + // All questions are solved controler + selectedData.length === allQuestionsData.length ? showResultContainer.style.display = "block" : "none"; + } // Timer -let timerFire; -function timer(minute, second) { - timerFire = setInterval(contDown, 1000); - function contDown() { - second--; - let currentTime = minute + ":" + (second < 10 ? "0" : "") + second; - timerBox.innerHTML = currentTime; - if (second === 0) { - if (minute > 0 && second === 0) { - minute--; - second = 60; - } else { - clearInterval(timerFire); - setQuestionsDisabled(); - showResult.click(); - hideAllCollapse(); - } + let timerFire; + + function timer(minute, second) { + timerFire = setInterval(contDown, 1000); + + function contDown() { + second--; + timerBox.innerHTML = minute + ":" + (second < 10 ? "0" : "") + second; + if (second === 0) { + if (minute > 0 && second === 0) { + minute--; + second = 60; + } else { + clearInterval(timerFire); + setQuestionsDisabled(); + showResult.click(); + hideAllCollapse(); + } + } + } } - } -} // If the time is over all question items are disabled -function setQuestionsDisabled() { - let questionItemBtn = document.querySelectorAll('.question-item-btn'); - questionItemBtn.forEach(function (item) { - item.setAttribute("disabled", "true"); - }); -} + function setQuestionsDisabled() { + let questionItemBtn = document.querySelectorAll('.question-item-btn'); + questionItemBtn.forEach(function (item) { + item.setAttribute("disabled", "true"); + }); + } // When finish quiz, hide all collapse -function hideAllCollapse() { - let allCollapse = document.querySelectorAll('.collapse'); - allCollapse.forEach(function (item) { - item.classList.remove("show"); - }); -} - - - - - - - - - - - - + function hideAllCollapse() { + let allCollapse = document.querySelectorAll('.collapse'); + allCollapse.forEach(function (item) { + item.classList.remove("show"); + }); + } +// + init(); +})(allQuestionsData, correctAnswers)