Alk_136

Untitled

Apr 21st, 2021 (edited)
208
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const headElem = document.getElementById("head");
  2. const buttonsElem = document.getElementById("buttons");
  3. const pagesElem = document.getElementById("pages");
  4.  
  5. //Класс, который представляет сам тест
  6. class Quiz
  7. {
  8.     constructor(type, questions, results)
  9.     {
  10.         //Тип теста: 1 - классический тест с правильными ответами, 2 - тест без правильных ответов
  11.         this.type = type;
  12.  
  13.         //Массив с вопросами
  14.         this.questions = questions;
  15.  
  16.         //Массив с возможными результатами
  17.         this.results = results;
  18.  
  19.         //Количество набранных очков
  20.         this.score = 0;
  21.  
  22.         //Номер результата из массива
  23.         this.result = 0;
  24.  
  25.         //Номер текущего вопроса
  26.         this.current = 0;
  27.     }
  28.  
  29.     Click(index)
  30.     {
  31.         //Добавляем очки
  32.         let value = this.questions[this.current].Click(index);
  33.         this.score += value;
  34.  
  35.         let correct = -1;
  36.  
  37.         //Если было добавлено хотя одно очко, то считаем, что ответ верный
  38.         if(value >= 1)
  39.         {
  40.             correct = index;
  41.         }
  42.         else
  43.         {
  44.             //Иначе ищем, какой ответ может быть правильным
  45.             for(let i = 0; i < this.questions[this.current].answers.length; i++)
  46.             {
  47.                 if(this.questions[this.current].answers[i].value >= 1)
  48.                 {
  49.                     correct = i;
  50.                     break;
  51.                 }
  52.             }
  53.         }
  54.  
  55.         this.Next();
  56.  
  57.         return correct;
  58.     }
  59.  
  60.     //Переход к следующему вопросу
  61.     Next()
  62.     {
  63.         this.current++;
  64.        
  65.         if(this.current >= this.questions.length)
  66.         {
  67.             this.End();
  68.         }
  69.     }
  70.  
  71.     //Если вопросы кончились, этот метод проверит, какой результат получил пользователь
  72.     End()
  73.     {
  74.         for(let i = 0; i < this.results.length; i++)
  75.         {
  76.             if(this.results[i].Check(this.score))
  77.             {
  78.                 this.result = i;
  79.             }
  80.         }
  81.     }
  82. }
  83.  
  84. //Класс, представляющий вопрос
  85. class Question
  86. {
  87.     constructor(text, answers)
  88.     {
  89.         this.text = text;
  90.         this.answers = answers;
  91.     }
  92.  
  93.     Click(index)
  94.     {
  95.         return this.answers[index].value;
  96.     }
  97. }
  98.  
  99. //Класс, представляющий ответ
  100. class Answer
  101. {
  102.     constructor(text, value)
  103.     {
  104.         this.text = text;
  105.         this.value = value;
  106.     }
  107. }
  108.  
  109. //Класс, представляющий результат
  110. class Result
  111. {
  112.     constructor(text, value)
  113.     {
  114.         this.text = text;
  115.         this.value = value;
  116.     }
  117.  
  118.     //Этот метод проверяет, достаточно ли очков набрал пользователь
  119.     Check(value)
  120.     {
  121.         if(this.value <= value)
  122.         {
  123.             return true;
  124.         }
  125.         else
  126.         {
  127.             return false;
  128.         }
  129.     }
  130. }
  131.  
  132. //Массив с результатами
  133. const results =
  134. [
  135.     new Result("Вам многому нужно научиться", 0),
  136.     new Result("Вы уже неплохо разбираетесь", 2),
  137.     new Result("Ваш уровень выше среднего", 4),
  138.     new Result("Вы в совершенстве знаете тему", 6)
  139. ];
  140.  
  141. //Массив с вопросами
  142. const questions =
  143. [
  144.     new Question("В каком году проходила олимпиада в Москве, символом которой был Олимпийский Мишка?",
  145.     [
  146.         new Answer("В 1978 году", 0),
  147.         new Answer("В 1980 году", 1),
  148.         new Answer("В 1970 году", 0)
  149.     ]),
  150.  
  151.     new Question("Как называется запрещенный элемент?",
  152.     [
  153.         new Answer("Петля Турищевой", 0),
  154.         new Answer("Петля Мухиной", 0),
  155.         new Answer("Петля Корбут", 1)
  156.     ]),
  157.  
  158.     new Question("Какой из приведенных видов не является интеллектуальным видом спорта?",
  159.     [
  160.         new Answer("Бридж", 0),
  161.         new Answer("Шахматы", 0),
  162.         new Answer("Петанк", 1)
  163.     ]),
  164.    
  165.     new Question("Какой из видов спорта является командной игрой с мячом и битой?",
  166.     [
  167.         new Answer("Трекбол", 0),
  168.         new Answer("Слэмбол", 0),
  169.         new Answer("Бейсбол", 1)
  170.     ]),
  171.  
  172.     new Question("Какой из видов спорта связан с управлением воздушным змеем?",
  173.     [
  174.         new Answer("Кайтсёрфинг", 1),
  175.         new Answer("Скейтбординг", 0),
  176.         new Answer("Карвинг", 0)
  177.     ]),
  178.  
  179.     new Question("Какой из видов спорта не является лыжным видом спорта?",
  180.     [
  181.         new Answer("Фристайл", 0),
  182.         new Answer("Биатлон", 0),
  183.         new Answer("Бобслей", 1)
  184.     ])
  185. ];
  186.  
  187. //Сам тест
  188. const quiz = new Quiz(1, questions, results);
  189.  
  190. Update();
  191.  
  192. //Обновление теста
  193. function Update()
  194. {
  195.     //Проверяем, есть ли ещё вопросы
  196.     if(quiz.current < quiz.questions.length)
  197.     {
  198.         //Если есть, меняем вопрос в заголовке
  199.         headElem.innerHTML = quiz.questions[quiz.current].text;
  200.  
  201.         //Удаляем старые варианты ответов
  202.         buttonsElem.innerHTML = "";
  203.  
  204.         //Создаём кнопки для новых вариантов ответов
  205.         for(let i = 0; i < quiz.questions[quiz.current].answers.length; i++)
  206.         {
  207.             let btn = document.createElement("button");
  208.             btn.className = "button";
  209.  
  210.             btn.innerHTML = quiz.questions[quiz.current].answers[i].text;
  211.  
  212.             btn.setAttribute("index", i);
  213.  
  214.             buttonsElem.appendChild(btn);
  215.         }
  216.        
  217.         //Выводим номер текущего вопроса
  218.         pagesElem.innerHTML = (quiz.current + 1) + " / " + quiz.questions.length;
  219.  
  220.         //Вызываем функцию, которая прикрепит события к новым кнопкам
  221.         Init();
  222.     }
  223.     else
  224.     {
  225.         //Если это конец, то выводим результат
  226.         buttonsElem.innerHTML = "";
  227.         headElem.innerHTML = quiz.results[quiz.result].text;
  228.         pagesElem.innerHTML = "Очки: " + quiz.score;
  229.     }
  230. }
  231.  
  232. function Init()
  233. {
  234.     //Находим все кнопки
  235.     let btns = document.getElementsByClassName("button");
  236.  
  237.     for(let i = 0; i < btns.length; i++)
  238.     {
  239.         //Прикрепляем событие для каждой отдельной кнопки
  240.         //При нажатии на кнопку будет вызываться функция Click()
  241.         btns[i].addEventListener("click", function (e) { Click(e.target.getAttribute("index")); });
  242.     }
  243. }
  244.  
  245. function Click(index)
  246. {
  247.     //Получаем номер правильного ответа
  248.     let correct = quiz.Click(index);
  249.  
  250.     //Находим все кнопки
  251.     let btns = document.getElementsByClassName("button");
  252.  
  253.     //Делаем кнопки серыми
  254.     for(let i = 0; i < btns.length; i++)
  255.     {
  256.         btns[i].className = "button button_passive";
  257.     }
  258.  
  259.     //Если это тест с правильными ответами, то мы подсвечиваем правильный ответ зелёным, а неправильный - красным
  260.     if(quiz.type == 1)
  261.     {
  262.         if(correct >= 0)
  263.         {
  264.             btns[correct].className = "button button_correct";
  265.         }
  266.  
  267.         if(index != correct)
  268.         {
  269.             btns[index].className = "button button_wrong";
  270.         }
  271.     }
  272.     else
  273.     {
  274.         //Иначе просто подсвечиваем зелёным ответ пользователя
  275.         btns[index].className = "button button_correct";
  276.     }
  277.  
  278.     //Ждём секунду и обновляем тест
  279.     setTimeout(Update, 1000);
  280. }
RAW Paste Data