JavaScriptで問題作成

質問

ホームページ上で問題を作成して公開予定です。

その作成の仕方について教えてください。

問題の内容は以下のようなイメージになります。

問題1

九州の県は次のうちどれですか?

福岡
広島
熊本
山梨
長崎

みたいな問題を作成し
解答には複数チェックボックスなどで複数選択できるようにしておき
福岡
熊本
長崎
を選択した場合は
正解
とし

他の選択をした場合は
不正解として
正しい解答を表示させるみたいな問題です。

昔はWeb問題作成ツール
http://www.fureai.or.jp/~irie/webquiz/

で一つだけ選択できる問題を作成していたのですが
こちらのサイトが閉鎖されているみたいで、色々やり方を
調べていますがわかりません。
教えてください。よろしくお願いします。

回答No.3

amanojaku1 · ベストアンサー

下記の方がスマートですね。

九州の県は次のうちどれですか?<br>
<br>
<form name="KyuusyuuForm">
<label><input id="FukuokaCheckbox" type="checkbox" onclick="oHTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">福岡</label><br>
<label><input id="HirosimaCheckbox" type="checkbox" onclick="oHTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">広島</label><br>
<label><input id="KumamotoCheckbox" type="checkbox" onclick="oHTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">熊本</label><br>
<label><input id="YamanasiCheckbox" type="checkbox" onclick="oHTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">山梨</label><br>
<label><input id="NagasakiCheckbox" type="checkbox" onclick="oHTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">長崎</label><br>
<br>
<input type="button" value="Exec" onclick="ClickButtonFunc( );" >
</form>
<br>

<div id="Answer"></div>

<script type="text/javascript">
<!--
oHTMLDocument_CheckboxChecked_Member = new Array( );
CorrectAnswer_Member = { // 正解
"FukuokaCheckbox":true,
"HirosimaCheckbox":false,
"KumamotoCheckbox":true,
"YamanasiCheckbox":false,
"NagasakiCheckbox":true
};

function ClickButtonFunc( ) {
oAnswer = document.getElementById('Answer' );
var ccm = oHTMLDocument_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>"+
"１つ以上をチェックして下さい。<br>";
}else if( err ){
oAnswer.innerHTML =
"不正解です。<br>"+
"正解は「福岡、熊本、長崎」です。<br>";
}else{
oAnswer.innerHTML = "正解です。<br>";
}
}
-->
</script>

補足

返事が遅くなりました。
仕事が忙しく中々見ることが出来なくやっと今日休みが出来たので
お礼が遅くなりました。
ありがとうございました。

そこで、上記Javascriptを使わせてもらぃました。

そこで、もう一つ質問がございます。

上記問題を続けて作成する場合はどのようにしたらいいのでしょうか?

今一人で格闘しているのですがJavascriptが動かなくなります。

例えば

問題１を作成した後に
続けて問題2を作成したいのですが、教えてください

回答No.7

amanojaku1

> // 厳密非等価比較
> if( ccm[k]!==undefined ) check = true;

↑すみませんバグです、これは下記のように変更して下さい。

if( ccm[k]==true ) check = true;

回答No.6

amanojaku1

> CorrectAnswer_Member = new Array( ); // 正解

↑実際の正解データは下記「for」ループ内の「CorrectAnswer_Member[CheckboxProperty_Member[i][1]] = CheckboxProperty_Member[i][2];」の部分で設定しています。

> 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>');
> }

お礼

ありがとうございました。

回答No.5

amanojaku1

これなら基本的に「CheckboxProperty_Member」の設定で お手軽に問題を設定できますね(その他メッセージ修正は当然必要ですが)。

<script type="text/javascript">
<!--
CheckboxProperty_Member = [
[ "福岡","FukuokaCheckbox", true ],
[ "広島","HirosimaCheckbox", false ],
[ "熊本","KumamotoCheckbox", true ],
[ "山梨","YamanasiCheckbox", false ],
[ "長崎","NagasakiCheckbox", true ]
]
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="Exec" 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>"+
"１つ以上をチェックして下さい。<br>";
}else if( err ){
oAnswer.innerHTML =
"不正解です。<br>"+
"正解は「福岡、熊本、長崎」です。<br>";
}else{
oAnswer.innerHTML = "正解です。<br>";
}
}
-->
</script>

回答No.4

amanojaku1

> CorrectAnswer_Member = { // 正解
> "FukuokaCheckbox":true,
> "HirosimaCheckbox":false,
> "KumamotoCheckbox":true,
> "YamanasiCheckbox":false,
> "NagasakiCheckbox":true
> };

↑この「FukuokaCheckbox、HirosimaCheckbox、KumamotoCheckbox、YamanasiCheckbox、NagasakiCheckbox」は「<input ～>」タグの"id"名と完全に同一にして下さい。
なお、「<input ～>」タグの"id"名は一意でなければなりません。

お礼

返事が遅くなりました。
仕事が忙しく中々見ることが出来なくやっと今日休みが出来たので
お礼が遅くなりました。
ありがとうございました。

回答No.2

amanojaku1

> if( ! check ){
> oAnswer.innerHTML =
> "チェックされていません。<br>"+
> "１つ以上をチェックして下さい。<br>";
> }else if( err ){
> oAnswer.innerHTML =
> "不正解です。<br>"+
> "正解は「福岡、熊本、長崎」です。<br>";

↑これは見易さのために文字列を分割しているだけなので、下記と等価です。

if( ! check ){
oAnswer.innerHTML =
"チェックされていません。<br>１つ以上をチェックして下さい。<br>";
}else if( err ){
oAnswer.innerHTML =
"不正解です。<br>正解は「福岡、熊本、長崎」です。<br>";

お礼

ありがとうございました。

とても参考になりました。

回答No.1

amanojaku1

> 昔はWeb問題作成ツール
> http://www.fureai.or.jp/~irie/webquiz/
> で一つだけ選択できる問題を作成していたのですが
> こちらのサイトが閉鎖されているみたい

これを期に JavaScript を少し勉強してみては如何でしょうか？

九州の県は次のうちどれですか?<br>
<br>
<form name="KyuusyuuForm">
<label><input id="FukuokaCheckbox" type="checkbox" onclick="oHTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">福岡</label><br>
<label><input id="HirosimaCheckbox" type="checkbox" onclick="oHTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">広島</label><br>
<label><input id="KumamotoCheckbox" type="checkbox" onclick="oHTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">熊本</label><br>
<label><input id="YamanasiCheckbox" type="checkbox" onclick="oHTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">山梨</label><br>
<label><input id="NagasakiCheckbox" type="checkbox" onclick="oHTMLDocument_CheckboxChecked_Member[this.id] = this.checked;">長崎</label><br>
<br>
<input type="button" value="Exec" onclick="ClickButtonFunc( );" >
</form>
<br>

<div id="Answer"></div>

<script type="text/javascript">
<!--
oHTMLDocument_CheckboxChecked_Member = new Array( );

function ClickButtonFunc( ) {
oAnswer = document.getElementById('Answer' );
var ccm = oHTMLDocument_CheckboxChecked_Member; // この関数内の短縮形 Alias
check = false; // true; //
err = false; // true; //
// 下記の「ccm[～]」の比較は厳密に言うと"undefined"は"false"として評価される。
if( ccm['FukuokaCheckbox'] ){
check = true;
}else{
err = true;
}
if( ccm['KumamotoCheckbox'] ){
check = true;
}else{
err = true;
}
if( ccm['NagasakiCheckbox'] ){
check = true;
}else{
err = true;
}
if( ccm['HirosimaCheckbox'] ){
check = true; err = true;
}
if( ccm['YamanasiCheckbox'] ){
check = true; err = true;
}
if( ! check ){
oAnswer.innerHTML =
"チェックされていません。<br>"+
"１つ以上をチェックして下さい。<br>";
}else if( err ){
oAnswer.innerHTML =
"不正解です。<br>"+
"正解は「福岡、熊本、長崎」です。<br>";
}else{
oAnswer.innerHTML = "正解です。<br>";
}
}
-->
</script>