ユーザーがリストから正しい答えを確認し、送信を押して自分がどれだけうまくいったかを確認する必要がある演習を行っています。ただし、送信ボタンが機能していないようです。クリックしても何も起こりません。スクリプトは次のとおりです。
<script>
//Returns how many correct answers were checked
$('#submitButton').click(function(){
var arrayScore = [];
var tempScore = 0;
$('.confirmContainer').remove();
$('.toggleConfirmList:checked').each(function(){
arrayScore.push($(this).val());
});
for(var i=0; i<arrayScore.length; i++)
{
tempScore = arrayScore[i] + tempScore;
}
$('feedback').show();
$("#scoreArea").val(tempScore);
});
</script>
基本的には、入力コンテナを無効にして、ユーザーのスコアを計算した後にフィードバックを表示したいと考えています。
スクリプトが使用する HTML コードは次のとおりです。
<ol class="toggleConfirmList" start="1">
<!-- Start of toggleConfirm question -->
<li class="toggleConfirm">
<p class="question">What is your citizenship?
</p>
<div class="toggleInputContainer">
<input type="checkbox" value="1">
</div>
</li>
<li class="toggleConfirm">
<p class="question">What is the purpose of your trip</p>
<div class="toggleInputContainer">
<input type="checkbox" value="1">
</div>
</li>
<li class="toggleConfirm">
<p class="question">How long will you be staying in Canada?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Where will you be staying?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">What is your occupation?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Do you have any family in Canada?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="1">
</div>
</li>
<li class="toggleConfirm">
<p class="question">How will you support yourself in Canada?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Do you intend to work or study while you are in Canada?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Have you ever been convicted of a criminal offence?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Do you suffer from any medical conditions?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Have you ever been refused a visa to Canada?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">In which country do you reside permanently?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="1">
</div>
</li>
</ol>
<div class="confirmContainer">
<input type="button" id="submitButton" value="Submit">
</div>
<div class="feedback">
<strong>Answer:</strong>In the exercise you checked <span id="scoreArea">0</span> correct questions
</div>