ramil_bayramov
@ramil_bayramov
Beginner programmer of HTML,CSS,JS

Проблема по поводу Quiz игры? Почему не срабатывает условие?

https://codepen.io/ramil1hey/pen/dyONLOZ написал quiz game. Есть 4 вопроса через переменную итерирую каждый вопрос. Проблема:
После нажатия на один из вариантов последнего вопроса то игра не прекращается а идет до конца времени т.е. пока не считано 10 сек а потом прекращается и показывает очки, хотя странно я писал условие
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
В массиве элементы нумеруются, начиная с 0:
[0]       // длина 1
[0, 1, 2] // длина 3

Длина, получается, на 1 больше индекса последнего элемента.

Ошибка тут:
const lastQuestion = questionArr.length;

// надо:
const lastQuestion = questionArr.length - 1;


Наскоро
так бы переписал
// select elements
const start = document.querySelector('#start');
const game = document.querySelector('#game');
const questionDiv = document.querySelector('#question');
const answers = document.querySelector('#answers');
const variant1 = document.querySelector('#variant1');
const variant2 = document.querySelector('#variant2');
const variant3 = document.querySelector('#variant3');
const variant4 = document.querySelector('#variant4');
let timeGauge = document.querySelector('#timeGauge');
let scoreDiv = document.querySelector('#score');

// store questions
const questionArr = [
    {
        question : 'What is the capital of Chile?',
        answer : 'Santiago',
        Choice1 : 'Bureo',
        Choice2 : 'Chelentano',
        Choice3 : 'Elensio'
    },
    {
        question : 'What is the largest country in the world by size?',
        answer : 'Russia',
        Choice1 : 'China',
        Choice2 : 'Indonesia',
        Choice3 : 'Vatican'
    },
    {
        question : 'What is the hottest continent on Earth?',
        answer : 'Africa',
        Choice1 : 'Saudi Arabia',
        Choice2 : 'Australia',
        Choice3 : 'something else'
    },
    {
        question : '1 + 1',
        answer : '2',
        Choice1 : '1',
        Choice2 : '3',
        Choice3 : 'something else'
    },
];

// quiz constants
const questionTime = 10;
const scoreCoefficient = 100 / questionArr.length;

// create some variables
let score = 0;
let counter = 0;
let correctAnswer = '';
let timeout;

const startQuiz = () => {
    start.style.display = 'none';
    game.style.display = 'flex';

    setupQuestion();
}

// tick
const checkCounter = () => {
    if (counter++ < questionTime) {
        timeGauge.innerHTML += `<div class="red__block">${counter}</div>`;
        timeout = setTimeout(checkCounter, 1000);
    } else {
        setupQuestion();
    }
}

// on answer
const checkAnswer = (event) => {
    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }

    if (event.target.textContent == correctAnswer) {
        alert('correct');
        score++;
    } else {
        alert('incorrect');
    }

    setupQuestion();
}

const setupQuestion = () => {
    if (questionArr.length === 0) {
        // конец игры
        return displayScore();
    }

    const Question = questionArr.shift();

    questionDiv.innerHTML = Question.question;

    correctAnswer = Question.answer;
    
    // варианты ответов перемешать случайно
    const variants = [Question.answer, Question.Choice1, Question.Choice2, Question.Choice3];
    variants.sort((a, b) => Math.random() - 0.5);
    variants.forEach((v, i) => this['variant' + (i + 1)].innerText = v);

    // сбросить на 0
    counter = 0;
    timeGauge.innerHTML = '';

    // время пошло!
    timeout = setTimeout(checkCounter, 1000);
}

// score
const displayScore = () => {
    scoreDiv.textContent = 'your score ' + Math.floor(scoreCoefficient * score);
}

// event listeners
start.addEventListener('click', startQuiz);
for (let i = 1; i <= 4; i++)
    this['variant' + i].addEventListener('click', checkAnswer);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Витебск
от 2 800 до 3 300 $
02 мар. 2021, в 21:07
5000 руб./за проект
02 мар. 2021, в 21:05
75000 руб./за проект
02 мар. 2021, в 20:57
9000 руб./за проект