${rawQuiz.question ? this._htmlEntities(rawQuiz.question) : ''}

`; let description = '', inputs = '', madeBy = ''; if (rawQuiz.madeBy) { madeBy = `

by ${ this._htmlEntities(rawQuiz.madeBy) }

`; } switch (rawQuiz.type) { case 'checkbox': case 'radio': description = `

${rawQuiz.description ? this._htmlEntities(rawQuiz.description) : ''}

`; inputs = this._buildChoices(rawQuiz, rawQuizIndex, showAnswer); break; case 'input': description = `

${rawQuiz.description ? this._htmlEntities(rawQuiz.description) : ''}

`; inputs = this._buildInput(rawQuiz, showAnswer); break; case 'multi-input': description = this._buildMultiInputDescription(rawQuiz, showAnswer); break; } return question + description + madeBy + inputs; } _buildChoices(rawQuiz, rawQuizIndex, showAnswer) { const choices = rawQuiz.choices.map( ((type, correctAnswer, showAnswer) => (rawChoice, index) => `

${this._htmlEntities(rawChoice)}

`)(rawQuiz.type, rawQuiz.correctAnswer, showAnswer) ); this.shuffleChoices(choices); return `

${choices.join('')}

`; } _buildInput(rawQuiz, showAnswer) { return `

`; } _buildMultiInputDescription(rawQuiz, showAnswer) { if (!rawQuiz.description) { throw new Error('Empty description in the multi-input quiz type.'); } const onInput = () => { if (this.value === ' ') { // This prevents from autocompletion whitespaces this.value = ''; } this.parentNode.dataset.value = this.value; if (this.value.length === +this.attributes.maxlength.value) { let inputs = Array.from(this.parentNode.parentNode.querySelectorAll('input')); let index = inputs.indexOf(this); if (index === inputs.length - 1) { this.blur(); } else { inputs[index + 1].focus(); } } }; let splittedDescription = rawQuiz.description.split(''); function *initInputGenerator() { for (let answer of rawQuiz.correctAnswer) { yield ` `; } } let inputGenerator = initInputGenerator(); return `

${splittedDescription.map((d) => this._htmlEntities(d)).map((d) => { let {value, done} = inputGenerator.next(); return d + (done ? '' : value); }).join('') }

`; } shuffleChoices(choices) { for (let i = choices.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * i); const temp = choices[i]; choices[i] = choices[j]; choices[j] = temp; } } buildCorrectQuizCard(quiz, quizIndex, quizzes) { return `

${this.buildQuiz(quiz, quizIndex, quizzes, true)}

`; } _htmlEntities(str) { return String(str) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"'); } } class SwiperHandler { constructor() { this.instance = null; } initSwiper() { this.instance = new Swiper('.swiper-container', { direction: 'horizontal', loop: false, pagination: { el: '.swiper-custom-pagination', bulletClass: 'indicator' } }); } destroySwiper() { this.swiperExists() ? this.instance.destroy() : null; } swiperExists() { return this.instance !== null; } } function eventListeners() { let quizCategories = QUIZ_CATEGORIES.map((data) => { return `${data.title}`; }); document.getElementById('quiz-categories').innerHTML = quizCategories.join(''); const ui = new UI(); const game = new Game(); const quizService = new QuizService(); const controller = new Controller(ui, game, quizService); ui.startButton.onclick = () => controller.start(); ui.quiz.onsubmit = (e) => {e.preventDefault(); controller.submitAnswer(true)}; ui.menuButton.addEventListener('click', () => controller.toggleMenu()); ui.closeMenuButton.onclick = () => controller.toggleMenu(); ui.viewAnswersButton.onclick = () => controller.viewAnswers(); document.body.onkeyup = (e) => e.key === "Escape" ? controller.toggleMenu() : null; document.addEventListener('timeout', () => controller.submitAnswer(false)); ui.quizCategories.forEach((value) => { value.onclick = controller.loadQuizzesByType.bind( controller, value.getAttribute('data-quiz-category'), value.getAttribute('data-quiz-title') ); }); ui.menuLinks.forEach((value) => { value.onclick = () => ui.openLink(value.dataset.menu); }); ui.restartButtons.forEach((value) => { value.onclick = () => controller.restart(); }); controller.loadQuizzesByType( QUIZ_CATEGORIES[4].category, QUIZ_CATEGORIES[4].title ); } document.addEventListener('DOMContentLoaded', eventListeners);

Quiz App