2017-10-19 86 views
1

我正在用JavaScript構建這個多選遊戲。規則相當簡單;用戶被問到number1 + number2等於什麼,並且有4個不同的選擇答案(一個是正確的)。JS多選遊戲無法檢測到正確答案

但是,由於某些原因,在我的代碼中,無論我選擇什麼答案(即使它是錯誤的),遊戲總是告訴我,我選擇了正確的答案。

這裏是我的代碼:

var num1 = Math.floor((Math.random() * 30) + 10); 
var num2 = Math.floor((Math.random() * 30) + 10); 
var result = num1 + num2; 

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById('field1').innerHTML = num1; 
    document.getElementById('field2').innerHTML = num2; 
    var opts = []; 
    for(var i=0;i<3;i++){ 
     opts.push(findRandom(result,opts)); 
    } 
    opts.push(result); 
    opts.sort(); 
    for(var i=1;i<5;i++){ 
    document.getElementById('option'+i).innerHTML = opts[i-1]; 
    } 
    console.log(opts); 
}); 

function findRandom(n,opts){ 
    var result = 0; 
    while(result !=n && result == 0){ 
    result = Math.floor(Math.random() * (n + 1)); 
    if(opts.indexOf(result) >0){ 
     result = 0; 
    } 
    } 
    return result; 
} 

var choices = document.querySelectorAll('.field-block'); 
[].slice.call(choices).forEach(function(choice){ 
    choice.addEventListener('click', function(){ 
     getChoice(choice); 
    }); 
}); 

function getChoice(){ 
    if(choices.innerHTML = result){ 
    after.classList.remove('hide'); 
    after.classList.add('correct'); 
    after.innerHTML = 'Good job :) !'; 
    } else{ 
    after.classList.remove('hide'); 
    after.classList.add('wrong'); 
    after.innerHTML = "Wrong answer :(Try again !"; 
    } 
} 

這裏是我的codepen:https://codepen.io/teenicarus/pen/Oxaaoe

自己嘗試一下,你會看到這個問題的時候了。

我該如何解決這個問題?

我感謝所有的反應

回答

0

有一對夫婦的問題。首先,您需要使用傳遞給getChoice()函數的參數,因爲它包含所選的choicechoices數組的可用選項。

其次,=用於賦值。這就是爲什麼你總是有成功的結果。您需要使用=====比較值。試試這個:

var num1 = Math.floor((Math.random() * 30) + 10); 
 
var num2 = Math.floor((Math.random() * 30) + 10); 
 
var result = num1 + num2; 
 

 
document.addEventListener("DOMContentLoaded", function(event) { 
 
    document.getElementById('field1').innerHTML = num1; 
 
    document.getElementById('field2').innerHTML = num2; 
 
    var opts = []; 
 
    for (var i = 0; i < 3; i++) { 
 
    opts.push(findRandom(result, opts)); 
 
    } 
 
    opts.push(result); 
 
    opts.sort(); 
 
    for (var i = 1; i < 5; i++) { 
 
    document.getElementById('option' + i).innerHTML = opts[i - 1]; 
 
    } 
 
}); 
 

 
function findRandom(n, opts) { 
 
    var result = 0; 
 
    while (result != n && result == 0) { 
 
    result = Math.floor(Math.random() * (n + 1)); 
 
    if (opts.indexOf(result) > 0) { 
 
     result = 0; 
 
    } 
 
    } 
 
    return result; 
 
} 
 

 
var choices = document.querySelectorAll('.field-block'); 
 
[].slice.call(choices).forEach(function(choice) { 
 
    choice.addEventListener('click', function() { 
 
    getChoice(choice); 
 
    }); 
 
}); 
 

 
function getChoice(choice) { 
 
    if (choice.innerHTML == result) { 
 
    after.classList.remove('hide'); 
 
    after.classList.add('correct'); 
 
    after.innerHTML = 'Good job :) !'; 
 
    } else { 
 
    after.classList.remove('hide'); 
 
    after.classList.add('wrong'); 
 
    after.innerHTML = "Wrong answer :(Try again !"; 
 
    } 
 
}
.App { 
 
    text-align: center; 
 
} 
 

 
.App-logo { 
 
    animation: App-logo-spin infinite 20s linear; 
 
    height: 60px; 
 
} 
 

 
.App-header { 
 
    background-color: #222; 
 
    height: 180px; 
 
    padding: 20px; 
 
    color: white; 
 
} 
 

 
.App-intro { 
 
    font-size: large; 
 
} 
 

 
@keyframes App-logo-spin { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
.text-info { 
 
    color: #fff; 
 
    font-weight: bold; 
 
    font-size: 2.1rem; 
 
} 
 

 
.question { 
 
    font-size: 2rem; 
 
} 
 

 
.options { 
 
    margin: 5%; 
 
    display: flex; 
 
    margin-right: -12px; 
 
    margin-left: -12px; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    align-items: stretch; 
 
    flex: 1 0 auto; 
 
} 
 

 
.fields { 
 
    display: flex; 
 
    padding: 12px; 
 
    flex-direction: column; 
 
    justify-content: flex-start; 
 
    align-items: stretch; 
 
    flex: 1; 
 
} 
 

 
.field-block { 
 
    display: flex; 
 
    min-height: 160px; 
 
    padding: 10%; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    align-items: center; 
 
    /*flex: 1 0 auto;*/ 
 
    border-radius: 4px; 
 
    background-color: #f9bad0; 
 
    font-size: 6rem; 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 

 
.quiz { 
 
    color: #ddd; 
 
    margin: 2%; 
 
    background-color: #ec1561; 
 
    padding: 2%; 
 
    width: 90%; 
 
    position: relative; 
 
} 
 

 
.button { 
 
    display: flex; 
 
    height: 48px; 
 
    padding-right: 16px; 
 
    padding-left: 16px; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex: 0 0 auto; 
 
    border-radius: 4px; 
 
    background-color: #2fcaaa; 
 
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), 0 2px 12px 0 rgba(0, 0, 0, .1); 
 
    transition: box-shadow 200ms ease-out; 
 
    color: #fff; 
 
    font-weight: 500; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.quiz .after { 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 5%; 
 
    width: 90%; 
 
    height: 80%; 
 
    /*display: none;*/ 
 
    color: #FFF; 
 
    text-align: center; 
 
    align-items: center; 
 
    justify-content: center; 
 
    display: flex; 
 
    opacity: 0.8; 
 
    font-size: 3rem; 
 
} 
 

 
.correct { 
 
    background-color: green; 
 
} 
 

 
.wrong { 
 
    background-color: #D91E18; 
 
} 
 

 
.hide { 
 
    display: none !important; 
 
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 

 
<a href="https://happy-learning.herokuapp.com/ " target="_blank"><img alt="Join Slack" height="40" width="139" src="http://i.imgur.com/0Lne5Vr.png" /></a> 
 
<div> 
 
    <h1>Adding Game</h1> 
 
    <p id="demo">In this lecture, we will cover the game to add 2 numbers.</p> 
 
</div> 
 
<hr> 
 

 
<div class="quiz"> 
 
    <div class="quiz-content"> 
 
    <div class="question"> 
 
     What is the sum of <span class="text-info" id="field1">5</span> and <span class="text-info" id="field2">5</span>? 
 
    </div> 
 
    <div class="options"> 
 
     <div class="fields animated zoomIn"> 
 
     <div class="field-block" id='option1'> 
 
      <li>10</li> 
 
     </div> 
 
     </div> 
 
     <div class="fields animated zoomIn"> 
 
     <div class="field-block" id="option2"> 
 
      <li>10</li> 
 
     </div> 
 
     </div> 
 
     <div class="fields animated zoomIn"> 
 
     <div class="field-block" id="option3"> 
 
      <li>10</li> 
 
     </div> 
 
     </div> 
 
     <div class="fields animated zoomIn"> 
 
     <div class="field-block" id="option4"> 
 
      <li>10</li> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="after hide" id="after"> 
 

 
    </div> 
 
    <div class="play-again"> 
 
     <a class="button" onClick="window.location.href=window.location.href">Play Again</a> 
 
    </div> 
 
    </div> 
 
</div>

0

我還沒有完全通過例子走了,但它可能是這樣的:

if(choices.innerHTML = result){ 

你分配的結果,而不是測試它,這樣的結局總是真正。

而且你不傳遞選擇:

function getChoice(){ 

嘗試

function getChoice(choices){ 
0

你在那裏有兩個錯誤。 首先:你在你的eventhandler中用param調用getChoice(),但你的函數不接受任何參數。第二:在你的getChoice中,你沒有比較,你正在分配(=不是==)。

我解決了你的codepen: https://codepen.io/anon/pen/mBvpvb