Prevent random numbers from duplicating

Question

I've been trying to make flag guessing game in js, It's supposed to generate("Generate") random flag, then you put in name of country, submit it("SUBMIT") and it displays either correct or wrong. After generating one flag it's supposed to delete it from pool so they don't duplicate. After all flags have been displayed, it's supposed to display "You are out of flags", to play again you hit restart("Restart") which reloades whole page. My problem is that I don't know how to implement it into code, to prevent duplicating which results in infinite flag shuffle.

<body>
    <button id="restart">Restart</button>
    <button id="get-flag">Generate</button>

    <img id="flag">
    <h1 id="output"></h1>

    <form id="answer-form">
        What country is it?
        <input type="text" id="answer" />
        <button type="submit">SUBMIT</button>
    </form>
    <p id="result"></p>
    <script>
        let restart = document.querySelector('#restart');
        let generate = document.querySelector('#get-flag');
        let img = document.querySelector('#flag');
        let output = document.querySelector("#output");
        let form = document.querySelector('#answer-form');
        let answer = document.querySelector('#answer');
        let result = document.querySelector('#result');

        let getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

        let data = [
            { src: `./flagi_sa/argentyna01.png`, name: 'Argentyna' },
            { src: `./flagi_sa/boliwia02.png`, name: 'Boliwia' },
            { src: `./flagi_sa/brazylia03.png`, name: 'Brazylia' },
            { src: `./flagi_sa/chile04.png`, name: 'Chile' },
            { src: `./flagi_sa/ekwador05.png`, name: 'Ekwador' },
            { src: `./flagi_sa/gujana06.png`, name: 'Gujana' },
            { src: `./flagi_sa/gujanaf07.png`, name: 'Gujana Francuska' },
            { src: `./flagi_sa/kolumbia08.png`, name: 'Kolumbia' },
            { src: `./flagi_sa/paragwaj09.png`, name: 'Paragwaj' },
            { src: `./flagi_sa/peru10.png`, name: 'Peru' },
            { src: `./flagi_sa/surinam11.png`, name: 'Surinam' },
            { src: `./flagi_sa/trinida12.png`, name: 'Trynidad' },
            { src: `./flagi_sa/urugwaj13.png`, name: 'Urugwaj' },
            { src: `./flagi_sa/wenezuela14.png`, name: 'Wenezuela' }
        ];

        generate.addEventListener('click', () => {
            if (data.length == 0) {
                output.innerText = "You are out of flags";
                return;
            }

            answer.value = '';
            result.textContent = '';

            let index = getRandomNumber(0, data.length - 1);
            img.src = data[index].src;
            form.dataset.index = index;
        });

        form.addEventListener('submit', e => {
            e.preventDefault();

            var guess = answer.value.toLowerCase();
            let isCorrect = data[form.dataset.index].name.toLowerCase() === guess;
            result.innerHTML = isCorrect ? 'Correct' : 'Wrong';
        });

        restart.addEventListener('click', () => window.location.reload());
    </script>
</body>

Are you asking how to remove a specific element from an array? — Dave Newton, Sep 14 '22 at 19:41
https://stackoverflow.com/questions/5767325, https://stackoverflow.com/questions/3954438, etc. — Dave Newton, Sep 14 '22 at 19:48
@RockySims That leaves a "hole" in the array, no? While that could be worked around by checking, it'd lead to annoying and non-deterministic behavior. — Dave Newton, Sep 14 '22 at 19:49
You could use `data.splice(index, 1)` to remove the element at `index` from the `data` array (without leaving a hole the way `delete data[index];` would. thx @DaveNewton). — Rocky Sims, Sep 14 '22 at 19:56

score 0 · Answer 1 · answered Sep 14 '22 at 19:47

If you want to draw each flag exactly once and in a random order, you can just shuffle the list of flags and then iterate on the list.

const shuffleArray = array => {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

shuffleArray(data);

let current_flag_index = 0 ;

generate.addEventListener('click', () => {
    if (current_flag_index == data.length) {
        output.innerText = "You are out of flags";
        return;
    }

    answer.value = '';
    result.textContent = '';

    current_flag += 1;
    img.src = data[current_flag_index].src;
    form.dataset.index = current_flag_index;
});

form.addEventListener('submit', e => {
    e.preventDefault();

    var guess = answer.value.toLowerCase();
    let isCorrect = data[form.dataset.index].name.toLowerCase() === guess;
    result.innerHTML = isCorrect ? 'Correct' : 'Wrong';
});

You do not remove the element per se but it's a simple way to achieve what you want.

--

Note: the shuffling algorithm comes from https://dev.to/codebubb/how-to-shuffle-an-array-in-javascript-2ikj

Hey, I really appreciate your effort but it either doesn't work or Im too dumb to implement it. Probably second option, im few days into js and i have little to no idea what im doing, could you show me it implemented (whole script included) — tegesek123, Sep 14 '22 at 20:00

Prevent random numbers from duplicating

1 Answers1