JavaScript:如何遍历我的问题数组

Question

我真的被困住了！作为一个新手，我正试图为“世界之旗”制作一个猜谜游戏。以下是我要做的事：

• 我有一个要洗牌的对象数组
• 然后，我要选择与图像匹配的正确国家。
• 将国家添加到图片下面的三个应答按钮中
• 我想检查一个正确/错误的答案
• 添加对用户的支持，以单击 next ，这将从我的对象数组中加载下一个“正确”的国家和图像以及两个“不正确”的国家。

目前，我通过使用currentFlagIndex (正确)和wrongFlagIndex (错误)和anotherWrongIndex (也是错误)的混合数组中的固定索引来创建变量。按照下面的代码，我可以让所有这些都工作一次，但是我完全停留在如何移动到next问题上。

我对着60秒计时器运行这一切。我有计时器倒计时，但没有尝试签入，以确保这不是零(一旦我知道如何移动我的问题，我会这样做)。

旗帜：

const flags = [
{ 
    image: 'assets/images/ad.webp',
    country: 'Andorra',
},
{ 
    image: 'assets/images/ae.webp',
    country: 'United Arab Emirates',
},
{ 
    image: 'assets/images/af.webp',
    country: 'Afghanistan',
},

游戏JavaScript：

const startButton = document.getElementById('start-button');
const nextButton = document.getElementById('next-button');
const answerButtons = document.getElementById('answer-buttons');

nextButton.addEventListener('click', buildNextQuestionArray);
/**
 * Set 60 second countdown timer. Code modified from Grepper: https://www.codegrepper.com/code-examples/javascript/add+countdown+timer+to+javascript+quiz
 */
let count = 60;
let interval = setInterval(function () {
    document.getElementById('timer').innerHTML = count;
    count--;
    if (count === 0) {
        clearInterval(interval);
        document.getElementById('timer').innerHTML = 'GAME OVER'; // this is where I can add what to do once the timer ends - take to the GAME OVER score html page
    }
}, 1000);

/**
 * Function to randomly sort array modified from: https://www.codegrepper.com/code-examples/javascript/how+to+randomly+sort+an+array+javascript 
 */
function createNewFlags(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;
    while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}

let newFlags = createNewFlags(flags);
console.log(newFlags[0].country);

let currentFlagIndex = 0;
console.log(newFlags[currentFlagIndex]);

let wrongFlagIndex = 12;
console.log(newFlags[wrongFlagIndex]);

let anotherWrongFlagIndex = 21;
console.log(newFlags[anotherWrongFlagIndex]);

/** 
 * Create an array of the correct answer and two wrong answers
 **/
function buildFullAnswerArray() {
    let fullAnswerArray = []; {
        fullAnswerArray.push(newFlags[currentFlagIndex].country);
        fullAnswerArray.push(newFlags[wrongFlagIndex].country);
        fullAnswerArray.push(newFlags[anotherWrongFlagIndex].country);
    }
    return fullAnswerArray
}

let allAnswers = buildFullAnswerArray();
console.log(allAnswers);

/** 
 * Shuffle the allAnswers array so that the order of the countries in the answers will be randomised
 **/
function createShuffledAnswers(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;
    while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}

let finalAnswers = createShuffledAnswers(allAnswers);
console.log(finalAnswers);


    document.getElementById('flag').src = newFlags[currentFlagIndex].image;

    let answer1 = document.getElementById('answer-1');
    let answer2 = document.getElementById('answer-2');
    let answer3 = document.getElementById('answer-3');

    answer1.innerText = finalAnswers[0];
    answer2.innerText = finalAnswers[1];
    answer3.innerText = finalAnswers[2];

    answer1.addEventListener('click', checkAnswer);
    answer2.addEventListener('click', checkAnswer);
    answer3.addEventListener('click', checkAnswer);


/** 
 * Check button onclick whether correct answer or not - event listener
 * If correct - return 'CORRECT!' and change the body color to green
 * If incorrect - return 'WRONG!' and change the body color to red
 **/

function checkAnswer() {
    if (this.textContent === newFlags[currentFlagIndex].country) {
        let correct = true
        let correctAnswer = `CORRECT!`
        document.getElementById('result').innerHTML = correctAnswer;
        setStatusClass(document.body, correct);
        increaseScore();
    } else {
        let wrong = false
        let wrongAnswer = `WRONG!`
        document.getElementById('result').innerHTML = wrongAnswer;
        setStatusClass(document.body, wrong);
    }
    nextButton.classList.remove('hide');
    answerButtons.classList.add('hide');
}

/**
 * Gets the current score from the DOM and increments it by 1
 */
function increaseScore() {
    let currentScore = parseInt(document.getElementById('correct').innerText);
    document.getElementById('correct').innerText = ++currentScore;
}
/**
 * Adds a class to the body depending on whether the answer is correct or wrong. Allows the body color to be changed depending on correct or wrong answers.
 * Adapted from Web Dev Simplified YouTube Video: https://www.youtube.com/watch?v=riDzcEQbX6k
 */
function setStatusClass(element, correct) {
    clearStatusClass(element)
    if (correct) {
        element.classList.add('correct')
    } else {
        element.classList.add('wrong')
    }
}

/**
 * Resets class status on body. Used when setting the nextQuestion()
 * Adapted from Web Dev Simplified YouTube Video: https://www.youtube.com/watch?v=riDzcEQbX6k
 */
function clearStatusClass(element) {
    element.classList.remove('correct')
    element.classList.remove('wrong')
}

function resetState() {
    clearStatusClass(document.body);
    nextButton.classList.add('hide');
}

// function buildNextQuestionArray() {
//     currentFlagIndex = ++currentFlagIndex;
//     wrongFlagIndex = ++wrongFlagIndex;
//     anotherWrongFlagIndex = ++anotherWrongFlagIndex;
//     let nextQuestionArray = []; {
//         nextQuestionArray.push(newFlags[currentFlagIndex].country);
//         nextQuestionArray.push(newFlags[wrongFlagIndex].country);
//         nextQuestionArray.push(newFlags[anotherWrongFlagIndex].country);
//     }
//     return nextQuestionArray
// }

// let nextAnswers = buildNextQuestionArray();
// console.log(nextAnswers);

我已经注释掉了上面的代码，因为它将生成一个新的数组3，但它也会导致当前正确的答案返回错误，所以必须改变变量。

我想我有一个问题，我把答案文本和图像插入到函数之外，但是我在这里尝试了很多东西，它们都会返回错误。

游戏HTML：

 <!-- GAME AREA -->
    <div class="container">
        <div id="timer"></div>
        <div id="flag-container" class="flag"><img src="" id="flag"></div>
        <div id="answer-buttons" class="answer-box">
            <button class="btn" id="answer-1">Country 1</button>
            <button class="btn" id="answer-2">Country 2</button>
            <button class="btn" id="answer-3">Country 3</button>
        </div>
        <div id="result" class="result"></div>
        <!-- <div class="answer-box"><button class="start-btn" id="start-button">Start >></button></div> -->
        <div class="answer-box"><button class="next-btn hide" id="next-button">Next flag >></button></div>
        <div class="score">Score: <span id="correct" class="score">0</span></div>
    </div>

    <!-- SCRIPTS -->
    <script src="assets/js/flags.js"></script>
    <script src="assets/js/game.js"></script>

我有一个解决方案，可以在我的旗子数组中添加两个不正确的答案，但这似乎是一个长手(有216个标志！)解决这个问题的方法。我有所有的部分，我只是需要有人帮助我移动通过数组到下一个标志请！

完整代码的最新版本也部署在这里：Git集线器

我确信我的代码有很多错误，但是任何直接的帮助都会让我继续前进，我将非常感激！

Answer 1

所以你想要找到一种方法：

• 生成错误的答案标志(而不是硬编码)
• 重新创造一个新游戏
• 重新启动X定时器

很好的问题，有多种方法来完成这一点。

一种方法是将选定的标志移动/交换(如果您担心速度问题，则将项替换为更快的Big )。(对于大多数逻辑，您将重用随机生成的逻辑)

旗标c=correct s=selected

s，x，x，c，x，s，x，. => x，.，s，c，s

现在，当为一个新游戏生成下一个正确的标志时，您将重用随机生成的逻辑，并将旗标数组的长度减少一个(因此您不会选择与前一个游戏相同的标志，但这将留给您处理)。

这里有一个逻辑片段，您只需要重新启动定时器：https://jsfiddle.net/pmt3Ls2q/11/

function generateChoosenFlags(flagSize = flags.length) {
  // [wrong, wrong, correctFlag]?
    let choosenFlags = [];
  
  let randomFlagIndex = getRandomFlagIndex();
  let randomFlag = getFlag(randomFlagIndex);
  swapFlags(randomFlagIndex, flagSize - 1)
  choosenFlags.push(randomFlag);

  randomFlagIndex = getRandomFlagIndex(flags.length - 1);
  randomFlag = getFlag(randomFlagIndex);
  swapFlags(randomFlagIndex, flagSize - 2)
  choosenFlags.push(randomFlag);
  
  randomFlagIndex = getRandomFlagIndex(flags.length - 2);
  randomFlag = getFlag(randomFlagIndex);
  swapFlags(randomFlagIndex, flagSize - 3)
  choosenFlags.push(randomFlag); 

    return choosenFlags;
}

function getFlag(index) {
    return flags[index];
}

function getRandomFlagIndex(flagSize) {
    if(!flagSize){
    flagSize = flags.length;
  }
  
    return Math.floor(Math.random() * flagSize);
}

function swapFlags(indexFrom, indexTo) {
    const temp = flags[indexFrom];

    flags[indexFrom] = flags[indexTo];
  flags[indexTo] = temp;
}

function generateNewGame() {

 // If we wanted to prevent generating the same answer then we would change the size
 // to something like so:  generateChoosenFlags(flags.length - 1); But you will need to update the logic for that...
 const generatedFlags =  generateChoosenFlags();
 populateQuestion(generatedFlags);
 
 return generatedFlags;
}

function populateQuestion(generatedFlags) {
    let choosenFlagIndex = getRandomFlagIndex(generatedFlags.length);
    let choosenFlag = generatedFlags[choosenFlagIndex];
  choosenAnswer = choosenFlag;
  
  document.getElementById('flag').src = choosenFlag.image;
  let answerObjects = [
    document.getElementById('answer-1'), 
    document.getElementById('answer-2'), 
    document.getElementById('answer-3')
  ];
  
  for(var i = 0; i < generatedFlags.length; i++) {
    answerObjects[i].innerHTML = generatedFlags[i].country;
  }  
  
    console.log(choosenAnswer);
}

function checkAnswer(id) {
    const isCorrect = document.getElementById(id).innerHTML == choosenAnswer.country;
// Restart timer
}

Answer 2

所以你想展示下一个问题。如果你想一想，这句话可以分成几个部分。

1. 更新<image> src，以便显示下一个标志。
2. 更新正在显示的选项。
3. 更新checkAnswer函数以使变量currentFlagIndex中有正确的值。

你已经弄明白了这件事的逻辑。查看代码中的这些行。

    document.getElementById('flag').src = newFlags[currentFlagIndex].image;

    let answer1 = document.getElementById('answer-1');
    let answer2 = document.getElementById('answer-2');
    let answer3 = document.getElementById('answer-3');

    answer1.innerText = finalAnswers[0];
    answer2.innerText = finalAnswers[1];
    answer3.innerText = finalAnswers[2];

    answer1.addEventListener('click', checkAnswer);
    answer2.addEventListener('click', checkAnswer);
    answer3.addEventListener('click', checkAnswer);

他们给了你你想要的。现在，下一步是将这些行复制到buildNextQuestionArray中(我知道这个函数应该只返回下一组选项，但是单击next按钮时执行这个函数，所以我想把它们放在这里)

这能让你跨过你眼前的障碍。但是函数buildNextQuestionArray仍然是不完整的，在这方面您有更多的工作要做。我希望能做一个可爱的游戏在最后。