[html]ラジオボタンを使った診断の作成アドバイスをお願いいたします。

解決済

質問者：shinon26
質問日時：2018/12/09 10:52
回答数：4件

ラジオボタンを使った診断を作成したく、アドバイスを頂けますでしょうか。
html,cssで簡単なサイト作成ができる程度の知識しかなく、煮詰まっています。
html、javascript、jQuery…理想の形が作れれば形式は問いません。

ーーーーーーーーーーー
▼作成したい内容
・20問程度の設問
・設問に対して回答は3～5つ（ラジオボタン）
・診断結果は4種類（性格診断）→〇、△、□、×

ラジオボタンを使った診断系でよくみられるのが
「value」を使い、0,1,2…と数字を入れていく方法だと思うのですが、
ひとつの回答にひとつの点数ではなく、複数の別々の点数を当てはめたく困っています。

例）ーーーーーーーーーーー
【設問1】怒りを感じた時にあなたのとる行動は？
回答A：ふて寝　　　　　　　　（点数→　〇0点、△1点、□2点、×3点）
回答B：相手に怒りをぶつける　（点数→　〇1点、△2点、□0点、×3点）
回答C：第三者に愚痴を言う　　（点数→　〇2点、△0点、□1点、×3点）

【設問2】悲しいと感じた時にあなたのとる行動は？
回答A：引きこもる　　　　　　（点数→　〇3点、△0点、□0点、×1点）
回答B：泣き叫ぶ　　　　　　　（点数→　〇0点、△1点、□2点、×4点）
回答C：誰かに共感を求める　　（点数→　〇4点、△3点、□1点、×0点）
回答D：楽しいことをする　　　（点数→　〇2点、△4点、□3点、×2点）

↓↓↓
【診断結果】
〇：合計20点、△：合計18点、□：合計30点、×：合計9点
→一番特典の高い「□」タイプだと診断
ーーーーーーーーーーーーーー

このように、複数の点数を使い結果を表示したいのです。
なお、画像等は使わず、テキストだけのできるだけシンプルなページにしたいと考えています。

浅学でそもそもこの形式が可能かどうかもわかっていないのですが、、アドバイスを頂けますと幸いです。何卒宜しくお願いいたします。

お見苦しいかと思いますが、煮詰まっているソースを補足します。
ヘッダーです。

<head>
<script>
document.addEventListener('change',function(e){
var t=e.target;
if(t.nodeName=="INPUT" ||t.nodeName=="SELECT"){
var num=0;
var f=t.form;
for(var i=0;i<f.length;i++){
if(f[i].name=="ans") continue;
if((f[i].type=="checkbox" ||f[i].type=="radio") && f[i].checked ) num+=parseInt(f[i].value);}
f.elements["ans"].value=num;}
});
</script>
</head>

補足日時：2018/12/10 23:51
通報する
BODYです。

<body>
<form>
【1】怒りを感じた時にあなたのとる行動は？</br>
<label><input type="radio" name="01" value="2">A：ふて寝 </label></br>
<label><input type="radio" name="01" value="1">B：相手に怒りをぶつける</label></br>
<label><input type="radio" name="01" value="1">C：第三者に愚痴を言う</label></br>
</br>

補足日時：2018/12/10 23:53
通報する
【2】悲しい時にとる行動は？</br>
<label><input type="radio" name="2" value="2">A：引きこもる </label></br>
<label><input type="radio" name="2" value="1">B：泣き叫ぶ</label></br>
<label><input type="radio" name="2" value="1">C：共感を求める</label></br>
<label><input type="radio" name="2" value="1">D：楽しいことする</label></br>
【3～20】</br>
</br>
score　□：<input type="text" name="ans" value="0" readonly>点　〇：点　△：点　×：点</br>
</form>
</body>

補足日時：2018/12/10 23:55
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.4ベストアンサー

回答者： fujillin
回答日時：2018/12/11 09:39

こんにちは

一般的な解決法とは言えませんが、value属性を利用して簡便に値を設定する方法の一例です。
点数が0～9と考えて、例えば value="0123" の各桁を〇△□×に対応させるという考え方です。
ですので、数が増えたり点数の桁が増えたりするとそのままでは使えません。
ただし、そういった限定しているために処理はかなり簡単になります。

＞浅学でそもそもこの形式が可能かどうかもわかっていないのですが
論理的に記述できる処理であれば、大抵の計算は可能だと思います。
以下は、「可能」ということの一例ですので、一般的な考え方ではありません。

ひとまず、判定をするだけの簡単なものにしてあります。
※ご質問文に無いので、未入力のチェックはしていません。
※IEはアロー記法に対応していないようなので、無視しています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#QA, #QA * { margin:0; padding:0; }
#QA { list-style-type:none; counter-reset:qnum; }
#QA li { margin-bottom:1em; counter-increment:qnum 1; }
#QA li p { display:inline-block; }
#QA label { display:block; margin-left:6.5em; }
#QA li::before { content:"【設問 " counter(qnum) " 】"; }

#diagnosis { margin:1em; padding:0.5em 1.5em; }
</style>

<script type="text/javascript">
document.addEventListener("click", (e)=>{
if(e.target.id != "diagnosis") return;

let result = [0,0,0,0], max = 0, idx;
document.querySelectorAll("#QA>li").forEach((elm)=>{
let inp = elm.querySelector('input[type="radio"]:checked');
if(inp){ inp.value.split("").forEach((v, i)=>{ result[i] += +v; }); }
});

result.forEach((v, i)=>{
if(v>max){ max = v; idx = i; }
});
alert("結果は " + "〇△□×".substr(idx, 1) + " です");
});
</script>
</head>

<body>
<ul id="QA">
<li><p>怒りを感じた時にあなたのとる行動は？</p>
<label><input name="Q1" type="radio" value="0123" />ふて寝</label>
<label><input name="Q1" type="radio" value="1203" />相手に怒りをぶつける</label>
<label><input name="Q1" type="radio" value="2013" />第三者に愚痴を言う</label>
</li>

<li><p>悲しいと感じた時にあなたのとる行動は？</p>
<label><input name="Q2" type="radio" value="3001" />引きこもる</label>
<label><input name="Q2" type="radio" value="0124" />泣き叫ぶ</label>
<label><input name="Q2" type="radio" value="4310" />誰かに共感を求める</label>
<label><input name="Q2" type="radio" value="2432" />楽しいことをする</label>
</li>
</ul>
<hr />
<input id="diagnosis" type="button" value="診断" />
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

fujillinさん

具体的にありがとうございます！！
点数が0～4でしたので、記載していただいた処理で十分に適応することができました！
valueで対応させることができるなんて目から鱗で、ベストアンサーに選ばせていただきます。

最後の回答が、ダイアログではなく、テキストで点数表示が出来れば…とは思うのですが、
まだ関数そのものを読み解けないので、応用を利かせるために参考にしながら勉強してみたいと思います。
もしお手すきでしたら、その点もご教示いただけると幸いです・・・！が！
ひとまずの目的は達しましたので、本当にありがとうございます！！！助かりました！！

通報する

お礼日時：2018/12/12 20:16