index.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. const quizContainer = document.getElementById('quiz');
  2. const resultsContainer = document.getElementById('results');
  3. const submitButton = document.getElementById('submit')
  4. // const createQuizBtn = document.getElementById('create_constructor')
  5. function buildQuiz(){
  6. getConstructorLS()
  7. const output = [];
  8. // перебираем вопросы
  9. yourQuiz.forEach(
  10. (currentQuestion, questionNumber) => {
  11. const answers = [];
  12. // перебираем ответы
  13. for(letter in currentQuestion.answers){
  14. // добавляем радио кнопку
  15. answers.push(
  16. `<label>
  17. <input type="radio" name="question${questionNumber}" value="${letter}">
  18. ${letter} :
  19. ${currentQuestion.answers[letter]}
  20. </label>`
  21. );
  22. }
  23. output.push(
  24. `<div class="card">
  25. <div class="question"> ${currentQuestion.question} </div>
  26. <div class="answers"> ${answers.join('')} </div>
  27. </div>`
  28. );
  29. setAnswersToLS(answers)
  30. }
  31. );
  32. quizContainer.innerHTML = output.join('');
  33. }
  34. const setAnswersToLS = (data) => {
  35. localStorage.setItem('answers', JSON.stringify(data));
  36. }
  37. const getAnswersLS = () => {
  38. const answersLS = JSON.parse(localStorage.getItem('answers'));
  39. if (answersLS) {
  40. answersLS.forEach((answer, index) => answers[index] = answer)
  41. }
  42. }
  43. function showResults(){
  44. // контейнер для ответов
  45. const answerContainers = quizContainer.querySelectorAll('.answers');
  46. // счётчик правильных ответов
  47. let numCorrect = 0;
  48. // для каждого вопроса
  49. yourQuiz.forEach( (currentQuestion, questionNumber) => {
  50. // находим выбранный ответ
  51. const answerContainer = answerContainers[questionNumber];
  52. const selector = `input[name=question${questionNumber}]:checked`;
  53. const userAnswer = (answerContainer.querySelector(selector) || {}).value;
  54. const rightAnswer = currentQuestion.correctAnswer;
  55. // если ответ правильный
  56. if(userAnswer === rightAnswer){
  57. // то добавляем к правильным ответам
  58. numCorrect++;
  59. // и отмечаем зелёным
  60. answerContainers[questionNumber].style.color = 'green';
  61. }
  62. // если ответ не правильный, или не отмеченный
  63. else {
  64. // - тогда красный
  65. answerContainers[questionNumber].style.color = 'red';
  66. const correctAnswer = document.createElement('p');
  67. correctAnswer.innerText=`Correct answer is: ${rightAnswer}`
  68. answerContainers[questionNumber].appendChild(correctAnswer)
  69. }
  70. });
  71. // показываем результат
  72. let userTestResult = numCorrect >= 7 ? "passed" : "did not pass";
  73. resultsContainer.innerHTML = `<h4>You ${userTestResult} the test! <a href="#" class="test-again">Take the test again</a></h4>
  74. <h5>You scored ${numCorrect} out of ${yourQuiz.length}</h5>`;
  75. document.querySelector('.test-again').onclick = (e) => {
  76. e.preventDefault();
  77. localStorage.removeItem('answers');
  78. location.reload();
  79. }
  80. }