プログラミング

質問

「あなたの … 度チェック」を作成しているのですが
スコアの合計点により・・・たとえば何点から何点の人はオタクですねみたいなメッセージを返すには

また、表題・設問・配点 などを，外部ファイルで与える
にはどうすればいいですか？

<title>questionnaire</title>
<script type="text/javascript">
<!--
function check() {
// 各設問に対する回答について，選択された radio ボタンの
// value 属性の値を合計して表示するのを作成するには？
//-->
</script>
<h1>あなたのハムスターマニア度チェック</h1>
<form name="f">
<table border>
<tr>
<td>ハムスターを飼ったことがある</td>
<td><input type="radio" name="Q1" value="10">はい
<input type="radio" name="Q1" value="0">いいえ
<input type="radio" name="Q1" value="0">わからない</td>
</tr>
<tr>
<td>ゴールデンハムスターの別名はシリアンハムスターだ</td>
<td><input type="radio" name="Q2" value="10">はい
<input type="radio" name="Q2" value="0">いいえ
<input type="radio" name="Q2" value="0">わからない</td>
</tr>
<tr>
<td>ハムスターの餌には，やっぱりひまわりの種だ</td>
<td><input type="radio" name="Q3" value="0">はい
<input type="radio" name="Q3" value="10">いいえ
<input type="radio" name="Q3" value="0">わからない</td>
</tr>
<tr>
<td>キンクマは実はゴールデンハムスターの亜種である</td>
<td><input type="radio" name="Q4" value="10">はい
<input type="radio" name="Q4" value="0">いいえ
<input type="radio" name="Q4" value="0">わからない</td>
</tr>
<tr>
<td>ハムスターにどんぐりを与えてはいけない</td>
<td><input type="radio" name="Q5" value="10">はい
<input type="radio" name="Q5" value="0">いいえ
<input type="radio" name="Q5" value="0">わからない</td>
</tr>
<tr>
<td>キャンベルは気が荒いなんて嘘だ</td>
<td><input type="radio" name="Q6" value="10">はい
<input type="radio" name="Q6" value="5">いいえ
<input type="radio" name="Q6" value="0">わからない</td>
</tr>
<tr>
<td>まん丸になって寝ているハムスターを見ると心が和む</td>
<td><input type="radio" name="Q7" value="10">はい
<input type="radio" name="Q7" value="-10">いいえ
<input type="radio" name="Q7" value="0">わからない</td>
</tr>
<tr>
<td>ほお袋がいっぱいになるまで餌をやってみたことがある</td>
<td><input type="radio" name="Q8" value="10">はい
<input type="radio" name="Q8" value="0">いいえ
<input type="radio" name="Q8" value="0">わからない</td>
</tr>
<tr>
<td>ハムスターが水を飲みながら居眠りするのを目撃したことがある</td>
<td><input type="radio" name="Q9" value="10">はい
<input type="radio" name="Q9" value="0">いいえ
<input type="radio" name="Q9" value="0">わからない</td>
</tr>
<tr>
<td>ハムスターが毛づくろいをしていて，勢いあまって仰向けに転倒するのを見たことがある</td>
<td><input type="radio" name="Q10" value="10">はい
<input type="radio" name="Q10" value="0">いいえ
<input type="radio" name="Q10" value="0">わからない</td>
</tr>
</table>
<input type="button" value="チェック" onclick="check();">
<input type="text" readonly name="result" size="3">点
</form>

回答No.2

OKbokuzyo

よく見ると質問は「外部ファイルとして扱うには？」だったので
またしてもとっかんで作ってみました。

いろいろな方法があるけれども参考程度にどうぞ。
※ またしても全角スペースが入っています。

----- data.js

var DATA = {
　Q1　:　{
　　setsumon　:　"ハムスターを飼ったことがある",
　　hai　　　　:　10,
　　iie　　　　:　0,
　　wakaranai　:　0
　},

　Q2　:　{
　　setsumon　:　"ゴールデンハムスターの別名はシリアンハムスターだ",
　　hai　　　　:　10,
　　iie　　　　:　0,
　　wakaranai　:　0
　},

　Q3　:　{
　　setsumon　:　"ハムスターの餌には，やっぱりひまわりの種だ",
　　hai　　　　:　0,
　　iie　　　　:　10,
　　wakaranai　:　0
　},

　Q4　:　{
　　setsumon　:　"キンクマは実はゴールデンハムスターの亜種である",
　　hai　　　　:　10,
　　iie　　　　:　0,
　　wakaranai　:　0
　},

　Q5　:　{
　　setsumon　:　"ハムスターにどんぐりを与えてはいけない",
　　hai　　　　:　10,
　　iie　　　　:　0,
　　wakaranai　:　0
　},

　Q6　:　{
　　setsumon　:　"キャンベルは気が荒いなんて嘘だ",
　　hai　　　　:　10,
　　iie　　　　:　5,
　　wakaranai　:　0
　},

　Q7　:　{
　　setsumon　:　"まん丸になって寝ているハムスターを見ると心が和む",
　　hai　　　　:　10,
　　iie　　　　:　-10,
　　wakaranai　:　0
　},

　Q8　:　{
　　setsumon　:　"ほお袋がいっぱいになるまで餌をやってみたことがある",
　　hai　　　　:　10,
　　iie　　　　:　0,
　　wakaranai　:　0
　},

　Q9　:　{
　　setsumon　:　"ハムスターが水を飲みながら居眠りするのを目撃したことがある",
　　hai　　　　:　10,
　　iie　　　　:　0,
　　wakaranai　:　0
　},

　Q10　:　{
　　setsumon　:　"ハムスターが毛づくろいをしていて，勢いあまって仰向けに転倒するのを見たことがある",
　　hai　　　　:　10,
　　iie　　　　:　0,
　　wakaranai　:　0
　}
}

----- html
<title>questionnaire</title>
<script src="data.js" type="text/javascript"></script>
<script type="text/javascript">
function tableBuilder (array) {
　for (var i = 0; i < array.length; i++) {
　　var data = eval("DATA." + array[i]);
　　document.write("<tr>");
　　document.write("<td>" + data.setsumon + "</td>");
　　document.write("<td><input type='radio' name='" + array[i] + "' value='" + data.hai + "'>はい");
　　document.write("<input type='radio' name='" + array[i] + "' value='" + data.iie + "'>いいえ");
　　document.write("<input type='radio' name='" + array[i] + "' value='" + data.wakaranai + "'>わからない</td>");
　　document.write("</tr>");
　}
}

function check() {

　var QUESTION_NUM = list.length;
　var score = 0;

　var getRadioValue = function (nodelist) {
　　for (var i = 0; i < nodelist.length; i++) {
　　　if (nodelist[i].checked) {
　　　　return nodelist[i].value;
　　　}
　　}
　　return 0;
　}
　for (var i = 1; i <= QUESTION_NUM; i++) {
　　var nodelist = eval("document.f.Q" + i);
　　score = score + parseInt(getRadioValue(nodelist));
　}
　document.f.result.value = score;
　if (score <= 20) alert("あなたは凡人です");
　if (20 < score && score <=80 ) alert("あなたはオタクですね");
　if (80 < score) alert("あなたは鬼畜ですね");
}

</script>
<h1>あなたのハムスターマニア度チェック</h1>
<form name="f">
<table border>
　<script type="text/javascript">
　　var list = new Array("Q1","Q2","Q3","Q4","Q5","Q6","Q7","Q8","Q9","Q10");
　　QUESTION_NUM = list.length;
　　tableBuilder(list);
　</script>
</table>
<input type="button" value="チェック" onclick="check();">
<input type="text" readonly name="result" size="3">点
</form>

しかしjsファイルはキャッシュされるので
src属性の後ろにシステム日付を入れるなどまだまだやるべきことがあるんですけどね。
眠くなってきたのでそろそろ寝ます。

余談ですが、htmlファイル直に配点を書くとソースを表示すれば
答えは丸見えになるので普通はサーバ側でやるんですけどね。

回答No.1

OKbokuzyo

>> スコアの合計点により・・・たとえば何点から何点の人はオタクですねみたいなメッセージを返すには

↓とっかんで作ったものだが
※　整形のため全角スペースが入っています

function check() {

　var QUESTION_NUM = 10;
　var score = 0;

　var getRadioValue = function (nodelist) {
　　for (var i = 0; i < nodelist.length; i++) {
　　　if (nodelist[i].checked) {
　　　　return nodelist[i].value;
　　　}
　　}
　　return 0;
　}
　for (var i = 1; i <= QUESTION_NUM; i++) {
　　var nodelist = eval("document.f.Q" + i);
　　score = score + parseInt(getRadioValue(nodelist));
　}
　document.f.result.value = score;
　if (score <= 20) alert("あなたは凡人です");
　if (20 < score && score <=80 ) alert("あなたはオタクですね");
　if (80 < score) alert("あなたは鬼畜ですね");
}

>> 表題・設問・配点 などを，

・表題
<title>要素の内容を変更するという意味なら
document.titleで値の取得、設定が可能。

・設問
設問を書いた<td>タグにid属性をつけるなりなんなりでノードを限定できるようにし、
あとはinnerHTMLを書き換えるようにすれば良い。

・配点
.valueで変更するだけ。

お礼

ありがとうございます！！
これでわかりました！！
実行できたとき感動しました！！