如何知道哪些單選按鈕被檢查並正確重定向

Question

我正在爲用戶回答三個問題的公司進行測驗，如果他們都是正確的，他們應該被重定向到他們填寫他們的聯繫信息的頁面有機會贏得獎品。 如果一個或多個問題的回答錯誤，則應將其重定向到另一個頁面。

我需要標記正確的答案，然後檢查它們。 如果所有問題都回答的是：重定向到motivering.html 如果一個或多個問題是錯誤的：重定向到tyvarr.html

我試圖檢查的值，僅拿出了這一點。這是不正確的，我幾乎可以肯定這不是最合適的方式。

jQuery的

$(document).ready(function() { 
    $('#questions input').on('change', function() { 
     console.log($('input[name=questionOne]:checked', '#questions').val()); 
     console.log($('input[name=questionTwo]:checked', '#questions').val()); 
     console.log($('input[name=questionThree]:checked', '#questions').val()); 
    }); 
}); 

我的標記 - HTML

<form method="POST" id="questions"> 
    <div class="form-group" id="questionOne"> 
     <h3>Question 1</h3> 
     <div class="radio"> 
      <input type="radio" name="questionOne" id="question1" class="radio" value="1" required/> 
      <label for="question1">Option 1</label> 
     </div> 
     <div class="radio"> 
      <input type="radio" name="questionOne" id="question2" class="radio" value="2"/> 
      <label for="question2">Option 2 - Right answer</label> 
     </div> 
     <div class="radio"> 
      <input type="radio" name="questionOne" id="question3" class="radio" value="3"/> 
      <label for="question3">Option 3</label> 
     </div> 
    </div> 

    <div class="form-group" id="questionTwo"> 
     <h3>Question 2</h3> 
     <div class="radio"> 
      <input type="radio" name="questionTwo" id="question4" class="radio" value="4" required/> 
      <label for="question4">Option 1</label> 
     </div> 
     <div class="radio"> 
      <input type="radio" name="questionTwo" id="question5" class="radio" value="5"/> 
      <label for="question5">Option 2</label> 
     </div> 
     <div class="radio"> 
      <input type="radio" name="questionTwo" id="question6" class="radio" value="6"/> 
      <label for="question6">Option 3 - Right answer</label> 
     </div> 
    </div> 

    <div class="form-group" id="questionThree"> 
     <h3>Question 3</h3> 
     <div class="radio"> 
      <input type="radio" name="questionThree" id="question7" class="radio" value="7" required/> 
      <label for="question7">Option 1</label> 
     </div> 
     <div class="radio"> 
      <input type="radio" name="questionThree" id="question8" class="radio" value="8"/> 
      <label for="question8">Option 2 - Right answer</label> 
     </div> 
     <div class="radio"> 
      <input type="radio" name="questionThree" id="question9" class="radio" value="9"/> 
      <label for="question9">Option 3</label> 
     </div> 
    </div> 

    <div class="buttons"> 
     <a href="index.html" class="btn btn-default form_button_cancel">Avbryt</a> 
     <button type="submit" class="btn btn-default form_button_next">Nästa</button> 
    </div> 
</form> 

我的風格 - CSS

@charset "utf-8"; 
/* CSS Document */ 

/* FONT */ 
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); 

body, textarea, input{ 
    font-family: 'Nunito', sans-serif; 
    font-weight:400; 
    font-size:16px; 
    line-height:26px; 
    letter-spacing:0.5px; 
} 
/*.start{ 
    background-color:tomato; 
}*/ 
h1, h2, h3, .form_button_start, .form_button_cancel, .form_button_next{ 
    font-family: 'Nunito', sans-serif; 
    font-weight:600; 
} 
h1, h2, h3{ 
    text-transform:uppercase; 
} 
h3{ 
    font-size:21px; 
    margin-top:50px; 
} 
textarea{ 
    resize:none; 
} 
ul{ 
    list-style:none; 
} 

.radio label { 
    width: 100%; 
    border-radius: 3px; 
    border: 1px solid #D1D3D4 
} 
/* hide input */ 
input.radio:empty { 
    margin-left: -999px; 
} 
/* style label */ 
input.radio:empty ~ label { 
    position: relative; 
    line-height: 3.5em; 
    text-indent: 2em; 
    margin-top: 1em; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    font-size:16px; 
    text-transform:uppercase; 
} 
input.radio:empty ~ label:before { 
    position: absolute; 
    display: block; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    content: ''; 
    width: 2.5em; 
    background: #D1D3D4; 
    border-radius: 3px 0 0 3px; 
} 
/* toggle hover */ 
input.radio:hover:not(:checked) ~ label:before { 
    /*content:'\2714';*/ 
    text-indent: .9em; 
    color: #C2C2C2; 
} 
input.radio:hover:not(:checked) ~ label { 
    color: #888; 
} 
/* toggle on */ 
input.radio:checked ~ label:before { 
    /*content:'\2714';*/ 
    text-indent: .9em; 
    color: #9CE2AE; 
    background-color: #4DCB6D; 
} 
input.radio:checked ~ label { 
    color: #333; 
} 
/* radio focus */ 
input.radio:focus ~ label:before { 
    box-shadow: 0 0 0 3px #999; 
} 

/* Butto style */ 
.form_button_cancel, .form_button_next, .form_button_start{ 
    width: 200px; 
    text-transform: uppercase; 
    line-height: 30px; 
    margin: 20px 0; 
} 
.form_button_start{ 
    background-color:green; 
    border:0px solid transparent; 
} 
.form_button_next{ 
    background-color: green; 
    float:right; 
    border:0px solid transparent; 
} 
.form_button_cancel{ 
    float:left; 
} 

Answer 1

$(document).ready(function() { 
 
    $('#questions input').on('change', function() { 
 
     /* Answers array, if there are more questiones I would think about changing questionOne to question1 
 
     * and build this array in a loop getting values by something like: 
 
     * userAnswers.push($('input[name=question'+ i +']:checked', '#questions).val()); 
 
     * or even group them under one class and query for .question:checked 
 
     */ 
 
     var userAnswers = [ 
 
     $('input[name=questionOne]:checked', '#questions').val(), 
 
     $('input[name=questionTwo]:checked', '#questions').val(), 
 
     $('input[name=questionThree]:checked', '#questions').val() 
 
     ]; 
 
     
 
     //Array that contains right answers, indexes must match userAnswers array. 
 
     var rightAnswers = [2, 6, 8]; 
 
     
 
     //Check if all answers are defined 
 
     for(var i = 0; i < userAnswers.length; i++){ 
 
     if(typeof userAnswers[i] === 'undefined'){ 
 
      return; 
 
     } 
 
     } 
 
     
 
     //Check if all answers are rightAnswers 
 
     for(var i = 0; i < userAnswers.length; i++){ 
 
     if(userAnswers[i] != rightAnswers[i]){ 
 
      return console.log('Found wrong answer!'); 
 
     } 
 
     } 
 
     
 
     console.log('All answers are correct.'); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
     <title>repl.it</title> 
 
     <link href="index.css" rel="stylesheet" type="text/css" /> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <form method="POST" id="questions"> 
 
     <div class="form-group" id="questionOne"> 
 
      <h3>Question 1</h3> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionOne" id="question1" class="radio" value="1" required/> 
 
       <label for="question1">Option 1</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionOne" id="question2" class="radio" value="2"/> 
 
       <label for="question2">Option 2 - Right answer</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionOne" id="question3" class="radio" value="3"/> 
 
       <label for="question3">Option 3</label> 
 
      </div> 
 
     </div> 
 
    
 
     <div class="form-group" id="questionTwo"> 
 
      <h3>Question 2</h3> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionTwo" id="question4" class="radio" value="4" required/> 
 
       <label for="question4">Option 1</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionTwo" id="question5" class="radio" value="5"/> 
 
       <label for="question5">Option 2</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionTwo" id="question6" class="radio" value="6"/> 
 
       <label for="question6">Option 3 - Right answer</label> 
 
      </div> 
 
     </div> 
 
    
 
     <div class="form-group" id="questionThree"> 
 
      <h3>Question 3</h3> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionThree" id="question7" class="radio" value="7" required/> 
 
       <label for="question7">Option 1</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionThree" id="question8" class="radio" value="8"/> 
 
       <label for="question8">Option 2 - Right answer</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionThree" id="question9" class="radio" value="9"/> 
 
       <label for="question9">Option 3</label> 
 
      </div> 
 
     </div> 
 
    
 
     <div class="buttons"> 
 
      <a href="index.html" class="btn btn-default form_button_cancel">Avbryt</a> 
 
      <button type="submit" class="btn btn-default form_button_next">Nästa</button> 
 
     </div> 
 
    </form> 
 
    </body> 
 
</html>

並用於重定向而不打印'找到錯誤的答案！'或「所有答案都是正確的！」在控制檯，你會怎麼做：

//Check if all answers are rightAnswers 
    for(var i = 0; i < userAnswers.length; i++){ 
    if(userAnswers[i] != rightAnswers[i]){ 
     window.location.href = 'wrong.html'; 
     return; // End here, and do not execute further redirection. 
    } 
    } 

    window.location.href = 'right.html'; 

這return內循環確保該腳本將結束函數執行那裏，它不會執行「right.html」重定向。

這兩個循環，檢查是否定義了答案，如果它們是正確的，可以合併成一個，但有更多的代碼會注意到所有的定義。

編輯：要回答在下面評論你的問題，起初我以爲我將它綁定到按鈕onclick事件，但將繼續驗證是在這種情況下（用場的時候有些問題沒有回答它注意到了用戶關於它）我認爲窗體的onsubmit會更好。我仍然會阻止默認行爲，因此表單沒有真正提交，但請記住，如果有人將js禁用，它會提交表單以便記住。所以，下一個按鈕是提交類型，並且它會嘗試提交表單，在onsubmit事件處理程序中，我會阻止表單提交併檢查答案。

$(document).ready(function() { 
 
    $('#questions').on('submit', function(e) { 
 
     e.preventDefault(); // Prevent form submition; 
 
     
 
     var userAnswers = [ 
 
     $('input[name=questionOne]:checked', '#questions').val(), 
 
     $('input[name=questionTwo]:checked', '#questions').val(), 
 
     $('input[name=questionThree]:checked', '#questions').val() 
 
     ]; 
 
     
 
     //Array that contains right answers, indexes must match userAnswers array. 
 
     var rightAnswers = [2, 6, 8]; 
 
     
 
     //Check if all answers are defined 
 
     for(var i = 0; i < userAnswers.length; i++){ 
 
     if(typeof userAnswers[i] === 'undefined'){ 
 
      return; 
 
     } 
 
     } 
 
     
 
     //Check if all answers are rightAnswers 
 
     for(var i = 0; i < userAnswers.length; i++){ 
 
     if(userAnswers[i] != rightAnswers[i]){ 
 
      return console.log('Found wrong answer!'); 
 
     } 
 
     } 
 
     
 
     console.log('All answers are correct.'); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
     <title>repl.it</title> 
 
     <link href="index.css" rel="stylesheet" type="text/css" /> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <form method="POST" id="questions"> 
 
     <div class="form-group" id="questionOne"> 
 
      <h3>Question 1</h3> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionOne" id="question1" class="radio" value="1" required/> 
 
       <label for="question1">Option 1</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionOne" id="question2" class="radio" value="2"/> 
 
       <label for="question2">Option 2 - Right answer</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionOne" id="question3" class="radio" value="3"/> 
 
       <label for="question3">Option 3</label> 
 
      </div> 
 
     </div> 
 
    
 
     <div class="form-group" id="questionTwo"> 
 
      <h3>Question 2</h3> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionTwo" id="question4" class="radio" value="4" required/> 
 
       <label for="question4">Option 1</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionTwo" id="question5" class="radio" value="5"/> 
 
       <label for="question5">Option 2</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionTwo" id="question6" class="radio" value="6"/> 
 
       <label for="question6">Option 3 - Right answer</label> 
 
      </div> 
 
     </div> 
 
    
 
     <div class="form-group" id="questionThree"> 
 
      <h3>Question 3</h3> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionThree" id="question7" class="radio" value="7" required/> 
 
       <label for="question7">Option 1</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionThree" id="question8" class="radio" value="8"/> 
 
       <label for="question8">Option 2 - Right answer</label> 
 
      </div> 
 
      <div class="radio"> 
 
       <input type="radio" name="questionThree" id="question9" class="radio" value="9"/> 
 
       <label for="question9">Option 3</label> 
 
      </div> 
 
     </div> 
 
    
 
     <div class="buttons"> 
 
      <a href="index.html" class="btn btn-default form_button_cancel">Avbryt</a> 
 
      <button type="submit" class="btn btn-default form_button_next">Nästa</button> 
 
     </div> 
 
    </form> 
 
    </body> 
 
</html>