Как сделать простой тест JavaScript

«Как мне составить тест на JavaScript?» — один из самых распространенных вопросов, задаваемых людьми, изучающими веб-разработку, и на то есть веские причины. Викторины это весело! Это отличный способ узнать о новых предметах, и они позволяют вам привлечь аудиторию чем-то веселым и игривым.

Эта популярная статья была обновлена ​​в 2020 году, чтобы отразить современные лучшие практики JavaScript.

Кодирование вашей собственной викторины JavaScript также является фантастическим упражнением в обучении. Он учит вас, как обращаться с событиями, управлять DOM, обрабатывать ввод данных пользователем, давать обратную связь пользователю и отслеживать его оценки (например, используя хранилище на стороне клиента). И когда у вас есть базовый тест и работает, есть целый ряд возможностей для добавления более продвинутых функций, таких как нумерация страниц. Я вхожу в это в конце статьи .

В этом руководстве я покажу вам, как создать многошаговую викторину по JavaScript, которую вы сможете адаптировать к своим потребностям и добавить на свой сайт. Если вы хотите увидеть, чем мы закончим, вы можете пропустить и посмотреть рабочий тест .

Что нужно знать перед началом

Несколько вещей, которые нужно знать перед началом:

• Это интерфейсное руководство, означающее, что ответы может найти любой, кто знает, как просмотреть исходный код страницы. Для серьезных тестов, данные должны быть обработаны через бэкэнд, который выходит за рамки этого руководства.
• Код в этой статье использует современный синтаксис JavaScript (ES6 +), что означает, что он не будет совместим с любыми версиями Internet Explorer. Тем не менее, он будет отлично работать в современных браузерах, включая Microsoft Edge.
• Если вам нужна поддержка старых браузеров, я написал учебник по JavaScript , совместимый с IE8. Или, если вы хотите освежить в ES6, ознакомьтесь с этим курсом Дарина Хейнера в SitePoint Premium.
• Вам понадобится некоторое знакомство с HTML, CSS и JavaScript, но каждая строка кода будет объяснена индивидуально.

Основная структура вашего JavaScript викторины

В идеале мы хотим, чтобы вопросы и ответы теста были в нашем коде JavaScript, и чтобы наш скрипт автоматически генерировал тест. Таким образом, нам не нужно писать много повторяющихся разметок, и мы можем легко добавлять и удалять вопросы.

Чтобы настроить структуру нашей викторины JavaScript, нам нужно начать со следующего HTML:

• <div> для проведения теста
• <button> для отправки теста
• <div> для отображения результатов

Вот как это будет выглядеть:

 <div id="quiz"></div> <button id="submit">Submit Quiz</button> <div id="results"></div> 

Затем мы можем выбрать эти элементы HTML и сохранить ссылки на них в переменных следующим образом:

 const quizContainer = document.getElementById('quiz'); const resultsContainer = document.getElementById('results'); const submitButton = document.getElementById('submit'); 

Далее нам понадобится способ построить тест, показать результаты и собрать все вместе. Мы можем начать с выкладывания наших функций и заполнять их по ходу дела:

 function buildQuiz(){} function showResults(){} // display quiz right away buildQuiz(); // on submit, show results submitButton.addEventListener('click', showResults); 

Здесь у нас есть функции, чтобы построить тест и показать результаты. Мы немедленно запустим нашу функцию buildQuiz и showResults нашу функцию showResults когда пользователь нажмет кнопку отправки.

Отображение вопросов викторины

Следующее, что нужно нашему тесту, — это несколько вопросов для отображения. Мы будем использовать объектные литералы для представления отдельных вопросов и массив для хранения всех вопросов, составляющих наш тест. Использование массива позволит легко перебирать вопросы:

 const myQuestions = [ { question: "Who invented JavaScript?", answers: { a: "Douglas Crockford", b: "Sheryl Sandberg", c: "Brendan Eich" }, correctAnswer: "c" }, { question: "Which one of these is a JavaScript package manager?", answers: { a: "Node.js", b: "TypeScript", c: "npm" }, correctAnswer: "c" }, { question: "Which tool can you use to ensure code quality?", answers: { a: "Angular", b: "jQuery", c: "RequireJS", d: "ESLint" }, correctAnswer: "d" } ]; 

Не стесняйтесь задавать столько вопросов или ответов, сколько хотите.

 function buildQuiz(){ // variable to store the HTML output const output = []; // for each question... myQuestions.forEach( (currentQuestion, questionNumber) => { // variable to store the list of possible answers const answers = []; // and for each available answer... for(letter in currentQuestion.answers){ // ...add an HTML radio button answers.push( `<label> <input type="radio" name="question${questionNumber}" value="${letter}"> ${letter} : ${currentQuestion.answers[letter]} </label>` ); } // add this question and its answers to the output output.push( `<div class="question"> ${currentQuestion.question} </div> <div class="answers"> ${answers.join('')} </div>` ); } ); // finally combine our output list into one string of HTML and put it on the page quizContainer.innerHTML = output.join(''); } 

 myQuestions.forEach( (currentQuestion, questionNumber) => { // the code we want to run for each question goes here }); 

 // we'll want to store the list of answer choices const answers = []; // and for each available answer... for(letter in currentQuestion.answers){ // ...add an html radio button answers.push( `<label> <input type="radio" name="question${questionNumber}" value="${letter}"> ${letter} : ${currentQuestion.answers[letter]} </label>` ); } // add this question and its answers to the output output.push( `<div class="question"> ${currentQuestion.question} </div> <div class="answers"> ${answers.join('')} </div>` ); 

 quizContainer.innerHTML = output.join(''); 

 // Functions function buildQuiz(){ ... } function showResults(){ ... } // Variables const quizContainer = document.getElementById('quiz'); const resultsContainer = document.getElementById('results'); const submitButton = document.getElementById('submit'); const myQuestions = [ ... ]; // Kick things off buildQuiz(); // Event listeners submitButton.addEventListener('click', showResults); 

 function showResults(){ // gather answer containers from our quiz const answerContainers = quizContainer.querySelectorAll('.answers'); // keep track of user's answers let numCorrect = 0; // for each question... myQuestions.forEach( (currentQuestion, questionNumber) => { // find selected answer const answerContainer = answerContainers[questionNumber]; const selector = `input[name=question${questionNumber}]:checked`; const userAnswer = (answerContainer.querySelector(selector) || {}).value; // if answer is correct if(userAnswer === currentQuestion.correctAnswer){ // add to the number of correct answers numCorrect++; // color the answers green answerContainers[questionNumber].style.color = 'lightgreen'; } // if answer is wrong or blank else{ // color the answers red answerContainers[questionNumber].style.color = 'red'; } }); // show number of correct answers out of total resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`; } 

 // gather answer containers from our quiz const answerContainers = quizContainer.querySelectorAll('.answers'); // keep track of user's answers let numCorrect = 0; 

 // for each question... myQuestions.forEach( (currentQuestion, questionNumber) => { // find selected answer const answerContainer = answerContainers[questionNumber]; const selector = `input[name=question${questionNumber}]:checked`; const userAnswer = (answerContainer.querySelector(selector) || {}).value; // if answer is correct if(userAnswer === currentQuestion.correctAnswer){ // add to the number of correct answers numCorrect++; // color the answers green answerContainers[questionNumber].style.color = 'lightgreen'; } // if answer is wrong or blank else{ // color the answers red answerContainers[questionNumber].style.color = 'red'; } }); 

 // find selected answer const answerContainer = answerContainers[questionNumber]; const selector = `input[name=question${questionNumber}]:checked`; const userAnswer = (answerContainer.querySelector(selector) || {}).value; 

 // if answer is correct if(userAnswer === currentQuestion.correctAnswer){ // add to the number of correct answers numCorrect++; // color the answers green answerContainers[questionNumber].style.color = 'lightgreen'; } // if answer is wrong or blank else{ // color the answers red answerContainers[questionNumber].style.color = 'red'; } 

 // show number of correct answers out of total resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`; 

 (function(){ // put the rest of your code here })(); 

 <div class="quiz-container"> <div id="quiz"></div> </div> <button id="previous">Previous Question</button> <button id="next">Next Question</button> <button id="submit">Submit Quiz</button> <div id="results"></div> 

 output.push( `<div class="slide"> <div class="question"> ${currentQuestion.question} </div> <div class="answers"> ${answers.join("")} </div> </div>` ); 

 .slide{ position: absolute; left: 0px; top: 0px; width: 100%; z-index: 1; opacity: 0; transition: opacity 0.5s; } .active-slide{ opacity: 1; z-index: 2; } .quiz-container{ position: relative; height: 200px; margin-top: 40px; } 

 // Functions // New functions go here // Variables // Same code as before // Kick things off buildQuiz(); // Pagination // New code here // Show the first slide showSlide(currentSlide); // Event listeners // New event listeners here 

 // Pagination const previousButton = document.getElementById("previous"); const nextButton = document.getElementById("next"); const slides = document.querySelectorAll(".slide"); let currentSlide = 0; 

 function showSlide(n) { slides[currentSlide].classList.remove('active-slide'); slides[n].classList.add('active-slide'); currentSlide = n; if(currentSlide === 0){ previousButton.style.display = 'none'; } else{ previousButton.style.display = 'inline-block'; } if(currentSlide === slides.length-1){ nextButton.style.display = 'none'; submitButton.style.display = 'inline-block'; } else{ nextButton.style.display = 'inline-block'; submitButton.style.display = 'none'; } } 

 // Pagination ... showSlide(currentSlide); 

 function showNextSlide() { showSlide(currentSlide + 1); } function showPreviousSlide() { showSlide(currentSlide - 1); } 

 // Event listeners ... previousButton.addEventListener("click", showPreviousSlide); nextButton.addEventListener("click", showNextSlide);