ラジオボタンを使った診断を作成したく、アドバイスを頂けますでしょうか。
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点
→一番特典の高い「□」タイプだと診断
ーーーーーーーーーーーーーー
このように、複数の点数を使い結果を表示したいのです。
なお、画像等は使わず、テキストだけのできるだけシンプルなページにしたいと考えています。
浅学でそもそもこの形式が可能かどうかもわかっていないのですが、、アドバイスを頂けますと幸いです。何卒宜しくお願いいたします。
No.4ベストアンサー
- 回答日時:
こんにちは
一般的な解決法とは言えませんが、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>
fujillinさん
具体的にありがとうございます!!
点数が0~4でしたので、記載していただいた処理で十分に適応することができました!
valueで対応させることができるなんて目から鱗で、ベストアンサーに選ばせていただきます。
最後の回答が、ダイアログではなく、テキストで点数表示が出来れば…とは思うのですが、
まだ関数そのものを読み解けないので、応用を利かせるために参考にしながら勉強してみたいと思います。
もしお手すきでしたら、その点もご教示いただけると幸いです・・・!が!
ひとまずの目的は達しましたので、本当にありがとうございます!!!助かりました!!
No.3
- 回答日時:
あ、jQueryの参照先は
ttps://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
の頭にhをつける
No.2
- 回答日時:
jQueryをつかった簡単な例
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script>
$(function(){
$(':radio').on('change',function(){
var a=[0,0,0,0];
$(':radio:checked').each(function(){
var idx=$('[name='+$(this).attr('name')+']').index(this);
a[idx]+=parseInt($(this).val());
});
console.log(a);
});
});
</script>
<div>
Q1.<br>
<label><input type="radio" name="q1" value="1">A:1</label>
<label><input type="radio" name="q1" value="2">B:2</label>
<label><input type="radio" name="q1" value="3">C:3</label>
<label><input type="radio" name="q1" value="4">C:4</label>
<hr>
Q2.<br>
<label><input type="radio" name="q2" value="2">A:2</label>
<label><input type="radio" name="q2" value="1">B:1</label>
<label><input type="radio" name="q2" value="4">C:4</label>
<label><input type="radio" name="q2" value="3">C:3</label>
<hr>
Q3.<br>
<label><input type="radio" name="q3" value="4">A:4</label>
<label><input type="radio" name="q3" value="2">B:2</label>
<label><input type="radio" name="q3" value="1">C:1</label>
<label><input type="radio" name="q3" value="3">C:3</label>
<hr>
Q4.<br>
<label><input type="radio" name="q4" value="2">A:2</label>
<label><input type="radio" name="q4" value="3">B:3</label>
<label><input type="radio" name="q4" value="1">C:1</label>
<label><input type="radio" name="q4" value="4">C:4</label>
<hr>
Q5.<br>
<label><input type="radio" name="q5" value="3">A:3</label>
<label><input type="radio" name="q5" value="4">B:4</label>
<label><input type="radio" name="q5" value="1">C:1</label>
<label><input type="radio" name="q5" value="2">C:2</label>
<hr>
yambejpさん
拙い質問でしたのに、質問見つけて回答くださりありがとうございます!!
今回は回答の値が複数欲しかったので、別の方にベストアンサーつけさせていただきましたが
最初にコメント付けていただいて本当に嬉しかったです!ありがとうございます!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) python コードについて(初学者です) 3 2023/07/20 14:44
- 計算機科学 エクセルのデータの表すことについて 2 2023/03/05 20:49
- 数学 数B ベクトルについて質問です。 平面上に△ABCと点P、Qがあるとする。次の等式が成り立つ時、点P 2 2022/06/28 19:51
- 中学校 中1数学 比例のグラフの座標の読み取り 4 2023/03/28 12:26
- 物理学 原点中心とする半径10cmの演習上、質点が1分間に600回の割合で反時計回りに運動している。 (1) 4 2023/05/29 12:46
- 物理学 xy平面上の原点に電荷量 1[C]の点電荷が,点 P(2,0) に電荷量-3[C]の点電荷が置かれて 4 2023/08/13 17:03
- C言語・C++・C# C言語 プログラミング 4 2022/05/22 11:53
- その他(コンピューター・テクノロジー) Pythonについて a = [[a, [1,2,3,4,5],3], ....(50人ほど続く)] 3 2022/05/16 01:37
- 数学 数学の一次関数の問題解いて欲しいです!お願いします! 次の直線の式を求めなさい ・傾きがー3/5で、 6 2022/08/24 23:30
- 野球 この選手は優秀だと思いますか? 2000本安打は達成していませんが、引退後も安泰でしょうか? 180 1 2022/08/24 04:48
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
セレクトメニューで選んだ値を...
-
セレクトボックスの文字
-
セレクトボックスから別窓にジ...
-
【HTML5】selectにrequierd
-
インラインフレーム内へのリンク
-
折りたたみ式メニューの作り方
-
プルダウンメニューの幅
-
Application.ScreenUpdating = ...
-
CLispのloop内の挙動について
-
文字のカラーとフォントの指定...
-
どちのほうがすきですか?
-
【メモリ不足で落ちる(python)】
-
パイソンのクラスのブログラム
-
パイソンのクラスについて
-
JSONで文字列が長い時
-
perlでcheckboxがうまく整理で...
-
foreach (1..4){ 英文字$_→$新...
-
パイソンのクラスについて
-
vscode 文字化け
-
右詰表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
セレクトメニューで2つの項目...
-
<SELECT>タグの折り返し
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
セレクトボックスの「選択して...
-
同じものを繰り返し表示させる
-
セレクトメニューで選んだ値を...
-
SELECT OPTIONの中身をコピペ...
-
セレクトボックスである項目を...
-
複数列を持ったリストボックス...
-
プルダウンメニューのボタンの...
-
セレクトボックスから別窓にジ...
-
プルダウンで別項目に値を代入...
-
プルダウンリストの背景色の指定
-
[html]ラジオボタンを使った診...
-
フォームの「キャンセル」ボタ...
-
プルダウンメニューで中央表示
-
selectタグ内の特定のoptionの...
-
select boxとinput valuの連動
おすすめ情報
お見苦しいかと思いますが、煮詰まっているソースを補足します。
ヘッダーです。
<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>
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>
【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>