ラジオボタンで2択のクイズを作成しています。最後に「計算」ボタンを押すと点数は出ます。あと!ラジオボタンの横にテキストボックスを設置して、正解なら「○」、不正解なら「×」と出るようにしたいのですが・・・
ぜひ教えてください。
よろしくお願いいたします。
<SCRIPT language="JavaScript">
<!--
function displayScore() {
var score = 0;
for(i=0;i<=20;i++){
if(document.form1.elements[i].checked){
score += parseInt(document.form1.elements[i].value);
}
}
document.form2.SCORE.value=score
window.alert(" あなたの点数は " + score + " 点です");
}
No.1ベストアンサー
- 回答日時:
HTMLの方も見てみないとなんともいえませんが…
以下は適当に作ったもんで多少、やろうとしている事とは違いもありますが、
解析して参考にするなり、そのまま使うなりお好きにそうぞ。
<html>
<head>
<title>クイズ</title>
<style type="text/css">
label,input{cursor:pointer;}
fieldset {margin:1em 0;}
fieldset input{margin-left:1em;}
.goodanswer {
text-decoration:underline;
}
.badanswer {
color:red;
text-decoration:underline;
}
</style>
<script type="text/javascript">
// ラベル:{Q:問題文,S1..Sn:選択肢,A:正解,P:得点}
var Quiz = {
'Q1':{'Q':'パンダの体毛は黒と何色?',
'S1':'緑','S2':'白',
'A':'S2','P':10},
'Q2':{'Q':'SMAPを脱退したメンバーは?',
'S1':'伊藤君','S2':'森君','S3':'和田君',
'A':'S2','P':20}
}
function init(){
var BLOCK = document.getElementById('QUIZ');
for(var x in Quiz){
var FS = document.createElement('fieldset');
var LG = document.createElement('legend');
LG.appendChild(document.createTextNode(Quiz[x]['Q']+'('+Quiz[x]['P']+'点)'));
FS.appendChild(LG);
for(var i=1;Quiz[x]['S'+i];i++){
var SPAN = document.createElement('span');
SPAN.innerHTML = '<input type="radio" name="'+ x +'" id="'+x+'_S'+i+'">' +
'<label for="'+x+'_S'+i+'">'+Quiz[x]['S'+i]+'</label>'
FS.appendChild(SPAN);
}
BLOCK.appendChild(FS);
}
}
function calc(){
var point = 0;
for(var x in Quiz){
var S = document.getElementById(x+'_'+Quiz[x]['A']);
S.parentNode.appendChild(
document.createTextNode(S.checked?'【○】':'【×】')
);
if(S.checked)point += Quiz[x]['P'];
S.parentNode.className = S.checked?'goodanswer':'badanswer';
}
var RES = document.getElementById('RESULT');
RES.replaceChild(
document.createTextNode('結果:'+point+'点'),RES.firstChild)
}
</script>
</head>
<body onload="init()">
<div id="QUIZ"></div>
<p id="RESULT"><input type="button" value="答え合わせ" onclick="calc()"></p>
</body>
</html>
No.2
- 回答日時:
たぶんこんなことがしたいのじゃないかと。
<html>
<head>
<style type="text/css">
.maru{
display:inline;
width:20px;
border:0px solid ;
color:red;
}
</style>
<script language=javascript>
function displayScore(f){
var score = 0;
var radios=new Object();
for(i =0 ; i<f.length;i++){
if(f[i].type=="radio"){
if(!radios[f[i].name]){
radios[f[i].name]=new Object()
radios[f[i].name].flg=false;
radios[f[i].name].name=f[i].name;
}
if(f[i].checked == true){
radios[f[i].name].flg=true;
radios[f[i].name].score=parseInt(f[i].value);
}
}
}
for(var i in radios){
if(radios[i].flg==false){
alert(radios[i].name+"のチェックが抜けてるよ");
return false;
}
score+=radios[i].score;
f["maru_"+i].value=radios[i].score==0?"×":"○";
}
alert(" あなたの点数は " + score + " 点です");
}
</script>
</head>
<body>
<form>
Q1.答えはA(5点)<br>
<input type="text" name="maru_q1" class="maru">
<input type="radio" name="q1" value="5" id="q1_1"><label for="q1_1">A</label>
<input type="radio" name="q1" value="0" id="q1_2"><label for="q1_2">B</label>
<input type="radio" name="q1" value="0" id="q1_3"><label for="q1_3">C</label>
<br>
Q2.答えはA(5点)<br>
<input type="text" name="maru_q2" class="maru">
<input type="radio" name="q2" value="5" id="q2_1"><label for="q2_1">A</label>
<input type="radio" name="q2" value="0" id="q2_2"><label for="q2_2">B</label>
<input type="radio" name="q2" value="0" id="q2_3"><label for="q2_3">C</label>
<br>
Q3.答えはA(5点)<br>
<input type="text" name="maru_q3" class="maru">
<input type="radio" name="q3" value="5" id="q3_1"><label for="q3_1">A</label>
<input type="radio" name="q3" value="0" id="q3_2"><label for="q3_2">B</label>
<input type="radio" name="q3" value="0" id="q3_3"><label for="q3_3">C</label>
<input type="radio" name="q3" value="0" id="q3_4"><label for="q3_4">D</label>
<br>
Q4.答えはA(5点)<br>
<input type="text" name="maru_q4" class="maru">
<input type="radio" name="q4" value="5" id="q4_1"><label for="q4_1">A</label>
<input type="radio" name="q4" value="0" id="q4_2"><label for="q4_2">B</label>
<input type="radio" name="q4" value="0" id="q4_3"><label for="q4_3">C</label>
<input type="radio" name="q4" value="0" id="q4_4"><label for="q4_4">D</label>
<br>
Q5.答えはA(10点)<br>
<input type="text" name="maru_q5" class="maru">
<input type="radio" name="q5" value="10" id="q5_1"><label for="q5_1">A</label>
<input type="radio" name="q5" value="0" id="q5_2"><label for="q5_2">B</label>
<br>
Q6.答えはA(10点)<br>
<input type="text" name="maru_q6" class="maru">
<input type="radio" name="q6" value="10" id="q6_1"><label for="q6_1">A</label>
<input type="radio" name="q6" value="0" id="q6_2"><label for="q6_2">B</label>
<br>
Q7.答えはA(10点)<br>
<input type="text" name="maru_q7" class="maru">
<input type="radio" name="q7" value="10" id="q7_1"><label for="q7_1">A</label>
<input type="radio" name="q7" value="0" id="q7_2"><label for="q7_2">B</label>
<br>
Q8.答えはA(10点)<br>
<input type="text" name="maru_q8" class="maru">
<input type="radio" name="q8" value="10" id="q8_1"><label for="q8_1">A</label>
<input type="radio" name="q8" value="0" id="q8_2"><label for="q8_2">B</label>
<br>
Q9.答えはA(20点)<br>
<input type="text" name="maru_q9" class="maru">
<input type="radio" name="q9" value="20" id="q9_1"><label for="q9_1">A</label>
<input type="radio" name="q9" value="0" id="q9_2"><label for="q9_2">B</label>
<br>
Q10.答えはA(20点)<br>
<input type="text" name="maru_q10" class="maru">
<input type="radio" name="q10" value="20" id="q10_1"><label for="q10_1">A</label>
<input type="radio" name="q10" value="0" id="q10_2"><label for="q10_2">B</label>
<input type="radio" name="q10" value="0" id="q10_3"><label for="q10_3">C</label>
<input type="radio" name="q10" value="0" id="q10_4"><label for="q10_4">D</label>
<br>
<input type="button" value="答え合わせ" onClick="displayScore(this.form)">
</form>
</body>
</html>
この回答への補足
先日はありがとうございました。更にお聞きしてもいいでしょうか?「○×」が出た横に、正しい答え「A」とかを出したいのですが・・・ぜひぜひ教えてください。よろしくお願いいたします。
補足日時:2007/10/02 15:42お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- C言語・C++・C# C言語プログラム変更 2 2022/12/21 15:03
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- C言語・C++・C# C言語 プログラミング 4 2022/05/22 11:53
- C言語・C++・C# C言語のエラーについて 2 2022/07/11 13:56
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- その他(プログラミング・Web制作) python コードについて(初学者です) 3 2023/07/20 14:44
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- C言語・C++・C# C言語 3 2022/11/09 13:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンのvalueとlabelの...
-
javascript作成してます。ラジ...
-
リセットボタンでクリアできな...
-
ラジオボタンとif文
-
ラジオボタンにタブインデック...
-
ラジオボタンでdisabledとchecked
-
ラジオボタンでチェックした項...
-
ラジオボタンの値でリンク先を...
-
return trueとreturn falseの用...
-
プルダウンで選択すると、DBの...
-
onClickとsubmitの処理順序
-
条件により、リンク先に画面遷...
-
ボタンを押すとチェックボック...
-
【jQuery】input nameの文字列...
-
Selectの中身をfor文で入れる
-
確認ダイアログの出し方(JavaS...
-
1つのform内に2つのsubmitボタ...
-
VB.NET DateTimeの型について
-
<input>の選択肢をプルダウンメ...
-
チェックボックスのON/OFFに応...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンにタブインデック...
-
ラジオボタンでチェックした項...
-
フォームPOST後「戻る」時のチ...
-
ラジオボタンのチェックが外れ...
-
データベースの値を判断してラ...
-
javascript作成してます。ラジ...
-
ラジオボタンを使って、検索ペ...
-
ラジオボタンでdisabledとchecked
-
チェックされたラジオボタンに...
-
ラジオボタンにチェックを入れ...
-
(jQuery)ラジオボタン選択値を...
-
クイズの正解(○×)をテキスト...
-
radio選択をクッキーに保存させ...
-
jsでラジオボタンによって表示...
-
ボタンの無効化
-
ラジオボタンで入力フィールド...
-
Jvasvriptのlengthで個数が取得...
-
ポップアップウインドウで選択...
-
ラジオボタンでの動的項目の変...
-
VBA IE ラジオボタンに...
おすすめ情報
