Schleife, die sehr langes Array zurückgibt, obwohl es 3 mal looping ist?

Question

Im Folgenden erstelle ich zwei Schleifen.

Im Grunde läuft es zuerst durch das Randomizer-Array, das 4 Werte enthält. Dies erzeugt dann zufällig eine Zahl zwischen 0 und 3 und wählt einen der Werte aus dem Randomizer-Array zu console.log zurück in zufälliger Reihenfolge (For Beispiel 2,0,3,1).

Die nächste Schleife arbeitet nach dem Zufallsprinzip falsche Antworten zu erstellen. Wenn diese falsche Antwort im Array allAnswers nicht vorhanden ist, wird sie an das Array gesendet.

Dies dann Schleifen und erstellt eine Schaltfläche, die die Benutzer Antworten sein werden, die sie wählen können.

All dies funktioniert perfekt. Außer, dass mein Array allAnswers 13 Werte zurückgibt, wenn es nur 4 haben sollte (1 davon ist mein vorherbestimmter Wert von 21).

Ich brauche es, um 4 Tasten zu erstellen, die jeweils durch eine Antwort mit der Array-Position zwischen 0-3 ziehen und diese eindeutigen Werte zurückgeben, ohne undefiniert zu sagen. Also bin ich mir nicht sicher, was ich in diesem Fall falsch mache?

var allAnswers = [21], 
    randomizer = [0, 1, 2, 3], 
    random = 0, 
    buttonArea = $("#answerOptions"); 


for (randomizer, r = randomizer.length; r--;) { 

    random = randomizer.splice(Math.floor(Math.random() * (r + 1)), 1)[0]; 
    // console.log(random); 

    // Generates 3 random wrong answers 
    for(wa = 0 ; wa < 3; wa++) { 
     wrongAnswers = Math.floor((Math.random() * 100) + 1); 
    } 

    // Pushes wrong answers to array 
    if (allAnswers.indexOf(wrongAnswers) === -1) { 
     allAnswers.push(wrongAnswers); 
    } 
    console.log(random); 
    input = $('<div class="col-xs-6"><button class="btn btn-primary answerButton">'+ allAnswers[random] +'</button></div>'); 
    input.appendTo(buttonArea); 
} 

console.log(allAnswers); 

EDIT:

Added in neue Schleife, die

var goodAnswer = 21, 
    allAnswers = [], 
    wrongAnswer, 
    wa, 
    buttonArea = $("#answerOptions"); 

for(wa = 0; wa < 4; wa++) { 
    do { 
    wrongAnswer = Math.floor((Math.random() * 100) + 1); 
    } while(wrongAnswer == goodAnswer || allAnswers.indexOf(wrongAnswer) !== -1); 

    allAnswers.push(wrongAnswer); 

    input = $('<div class="col-xs-6"><button class="btn btn-primary answerButton">'+ allAnswers +'</button></div>'); 
    input.appendTo(buttonArea); 
} 

allAnswers[Math.floor(Math.random() * 4)] = goodAnswer; 

console.log(goodAnswer); 
console.log(allAnswers); 
console.log(wa); 

Answer 1

Ihr 'wa' vorgeschlagen wurde Schleife ist nutzlos: es einen zufälligen Wert zu 'wrongAnswers' dreimal zuweisen. Aber am Ende haben Sie nur einen einzigen Wert.

Ein weiteres Problem ist, dass es kein "erneut versuchen" gibt, wenn 'wrongAnswers' die indexOf() Bedingung nicht besteht. In diesem Fall wird nichts in diese Iteration eingefügt.

Ich würde einen einfacheren Ansatz empfehlen: Erstellen Sie ein Array mit 4 zufälligen falschen Antworten und ersetzen Sie einen von ihnen durch den guten.

var goodAnswer = 21, 
    allAnswers = [], 
    wrongAnswer, wa; 

for(wa = 0; wa < 4; wa++) { 
    do { 
    wrongAnswer = Math.floor((Math.random() * 100) + 1); 
    } while(wrongAnswer == goodAnswer || allAnswers.indexOf(wrongAnswer) !== -1); 

    allAnswers.push(wrongAnswer); 
} 

allAnswers[Math.floor(Math.random() * 4)] = goodAnswer; 

Ich habe den HTML-Teil weggelassen, aber Sie können das leicht tun, nachdem das Array gebaut wurde.

EDIT

Oder wenn Sie wirklich den HTML-Code in der gleichen Schleife bearbeiten möchten, können Sie auch die Position der gute Antwort vor die Schleife bestimmen, so dass die Art der jeweiligen Position (falsch oder gut) ist von Anfang an bekannt. Jetzt müssen Sie keine der falschen Antworten überschreiben und Sie können die Schaltflächen innerhalb der Schleife sicher erstellen.

var goodAnswer = 21, 
    gaPosition = Math.floor(Math.random() * 4), 
    allAnswers = [], 
    buttonArea = $("#answerOptions"), 
    answer, n; 

for(n = 0; n < 4; n++) { 
    if(n == gaPosition) { 
    answer = goodAnswer; 
    } 
    else { 
    do { 
     answer = Math.floor((Math.random() * 100) + 1); 
    } while(answer == goodAnswer || allAnswers.indexOf(answer) !== -1);   
    } 
    allAnswers.push(answer); 

    input = $('<div class="col-xs-6"><button class="btn btn-primary answerButton">'+ answer +'</button></div>'); 
    input.appendTo(buttonArea); 
}