※ ChatGPTを利用し、要約された質問です(原文:JavaScriptで選択問題作成(2))
JavaScriptで選択問題作成(2) - 複数選択問題を同じページに作成する方法
このQ&Aのポイント
JavaScriptを使用して複数選択問題を同じページに作成する方法について教えてください。
問題1と問題2が連動してしまい、解答した問題2で問題1も解答されてしまう問題が発生しています。
現在、自分でプログラムを変更して修正しようとしていますが、解決できません。どのように修正すればいいでしょうか?
以前ここで問題作成の件で質問させてもらいました。
<h3>問題1</h3>
<script type="text/javascript">
<!--
CheckboxProperty_Member = [
[ "福岡","FukuokaCheckbox", true ],
[ "大阪","NagasakiCheckbox", false ]
]
CorrectAnswer_Member = new Array( ); // 正解
document.write('九州の県は次のうちどれですか?<br>');
document.write('<br>');
document.write('<form name="KyuusyuuForm">');
for(i = 0; i<CheckboxProperty_Member.length; i++){
CorrectAnswer_Member[CheckboxProperty_Member[i][1]] = CheckboxProperty_Member[i][2];
document.write('<label><input id="'+CheckboxProperty_Member[i][1]+'" type="checkbox" onclick="HTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">'+CheckboxProperty_Member[i][0]+'</label><br>');
}
document.write('<br>');
document.write('<input type="button" value="解答" onclick="ClickButtonFunc( );" >');
document.write('</form>');
document.write('<br>');
document.write('<div id="Answer"></div>');
HTMLDocument_CheckboxChecked_Member = new Array( );
function ClickButtonFunc( ) {
oAnswer = document.getElementById('Answer' );
var ccm = HTMLDocument_CheckboxChecked_Member; // この関数内の短縮形 Alias
var check = false; // true; //
var err = false; // true; //
for(k in CorrectAnswer_Member){
// 厳密非等価比較
if( ccm[k]!==undefined ) check = true;
// 厳密等価比較
if( ccm[k]===undefined ) ccm[k] = false;
if( ccm[k]!=CorrectAnswer_Member[k] ) err = true;
// ↑なぜか厳密非等価比較になるようです。
}
if( ! check ){
oAnswer.innerHTML =
"チェックされていません。<br>"+
"1つ以上をチェックして下さい。<br>";
}else if( err ){
oAnswer.innerHTML =
"不正解です。<br>"+
"正解は「福岡」です。<br>";
}else{
oAnswer.innerHTML = "正解です。<br>";
}
}
-->
</script>
の問題を
複数ページに設置しようとしています。
しかし、上記選択問題を同じにすると
もちろん問題1と問題2では連動して
問題2の解答をしたら問題1が解答されたりします。
ここ数日ずっと自分でプログラムを変更したりして修正しているのですが
解決できません。
複数選択問題を
同じページに複数問題を作成する方法を教えてください。
つまり
問題1
九州の県はどこですか?
福岡
大阪
問題2
九州の県はどこですか?
愛知
佐賀
問題3
九州の県はどこですか?
大分
長野
みたいな感じです
お願いします。
補足
早速ありがとうございます。 私が作りたかったのはまさしくこんな感じです。 ただリセットをクリックしてもリセットできないのですが それと、<meta charset="utf-8">だと文字化けするのですが