Я установил игру, которую я понял из вашего кода (нет jQuery).
- Вы можете начать, только если данные поступили
- Выбор (кнопки) тасуются, поэтому не всегда выигрывают первыми (тасование произошло отсюда: Как рандомизировать (перемешать) массив JavaScript? )
- Игра отслеживает правильные ответы
Возможно, это выглядит немного сложнее, чем вы, но (почти) все разделено на функции, поэтому их изменение проще (отображение, данные и логика игры c отделены друг от друга)
// used variables
const url = "https://opentdb.com/api.php?amount=10&type=multiple"
const startBtn = document.getElementById('btn-start')
const progress = document.getElementById('progress')
const question = document.getElementById('question')
const choices = document.getElementById('choices')
let results = ''
let questionId = 0
let correct = 0
// fetching the data
const fetchData = async(url) => {
// try-catch for handling fetch errors
try {
const resp = await fetch(url)
const json = await resp.json()
// only returning the questions and results
return json.results
} catch (err) {
console.log(err)
}
}
// only allow clicks on start button if the data has arrived
(async function() {
results = await fetchData(url)
startBtn.removeAttribute('disabled')
})();
// starting off with the game
startBtn.addEventListener('click', function(e) {
this.classList.add('started')
nextQuestion(correct, results, questionId)
})
// setting up the next question
const nextQuestion = (correct, results, questionId) => {
// set progress indicator
progress.innerHTML = progressText(correct, results.length)
// set question string
question.innerHTML = results[questionId].question
// set buttons to click
choices.innerHTML = setChoices(results[questionId].correct_answer, results[questionId].incorrect_answers)
// adding event listeners to buttons
const answerBtns = document.querySelectorAll(".answer")
answerBtns.forEach(e => {
e.addEventListener('click', function(e) {
const answer = e.target.getAttribute('data-val')
// checking for correct answer (and existence of next answer)
if (results[questionId] && answer === results[questionId].correct_answer) {
correct++
}
questionId++
// creating next question 'scene'
if (questionId < results.length) {
nextQuestion(correct, results, questionId)
}
})
})
}
// creating progress indicator string
const progressText = (correct, all) => {
return `${correct}/${all}`
}
// setting choice buttons
const setChoices = (correct, incorrect) => {
let answers = shuffleArray([correct, ...incorrect])
let html = ''
answers.forEach(e => {
html += `<button class="answer" data-val="${e}">${e}</button><br />`
})
return html
}
// shuffling the choice array for a little fun
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array
}
.start.started {
display: none;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="btn">
<button id="btn-start" type="button" class="start" disabled>Start</button>
<div id="game">
<h3 id="progress"></h3>
<h2 id="question"></h2>
<div id="choices"></div>
</div>
</div>