JavaScript 得点式の診断テスト

初心者です。得点式の診断テストを作ろうとおもっています。問題は5問で選択肢は2つ、Aを選んだら10点、Bを選んだら5点というようにして5問の合計点数の結果ごとに違ったコメントを表示させたいです。どのようなコードを使えば良いのでしょうか。var 、prompt、alert、if等は知っています。初心者で右も左も分からない状態なので教えて頂けると幸いです。

BeatStar

2021/10/26 07:59 編集

> 初心者で右も左も分からない状態なので教えて頂けると幸いです。無理です。仕様がまったく決まっていません。どのように教えろと? 今の質問では『小説を書きたいです。ジャンルはホラーです。誰か書き方とサンプルを教えてください』みたいなものです。書けば? と言いたくなりませんか? プログラミングは「こう書けばいい」というものではありません。決まった形があってそれを書けばいいというものではありません。ロジックを考えるのです。でも質問にある情報からはまったく何も読み取れません。 > 問題は5問で選択肢は2つ完全に固定? それともランダムにやるの? それと問題は追加される予定はないの? > 得点式の診断テストを作ろうとおもっていますどのように出力したりするの? たとえば、画像とかでやるのか、単純にテキストボックスかなんかで入力していくタイプ? それとも一問一問? つまり、https://english.005net.com/mondai/be_kote1.php みたいに一括で表示していくスタイル(実際にはこれに入力を受け付けるやつを置く)なのか、https://one.hpplus.jp/fortune/mental/1366 のような感じで一問解いてからじゃないと次に進めないタイプなのかとかでも違う。それに入力を受け付けるやつは何を想定していますか? 完全に記述タイプなら inputタグで"text"だし、選択式ならチェックボックスだし。単純に考えてもこれぐらいはあります。そりゃ、質問者さんからしたら「当たり前」でも私らは赤の他人です。赤の他人の頭の中を覗けません。なので提示された情報からしか読み取れません。とりあえず、仕様をちゃんと決めてください。

unipulin

2021/10/26 08:22

説明が至らず申し訳ありません、仰る通りです。選択肢が書いてある画像を表示し、promptで1問ずつ、1か2かを入力させて次の問題に進むものを考えています。問題が5問で選択肢が2択は完全に固定です。得点に関しては1問ずつ表示はせずに、5問の回答が終わってから合計得点を表示する形です。

BeatStar

2021/10/26 08:32

> 選択肢が書いてある画像を表示し、promptで1問ずつこれはどういう感じでしょうか。あまりイメージがないので。近いイメージのサイトってありますか? それか絵でもいいのでイメージをもっとわかりやすく出来ませんか? 画像とpromptは関係がありますか? (ユーザ目線で) 単にHTML側で画像を表示してそれの答えをpromptに入力するだけでいいのでしょうか。 (たとえばpromptに画像を表示したいとか。可能かどうかは別として)

yambejp

2021/10/26 09:45

１ページ内で済ますか、次のページの飛ぶかによって仕様が変わります一度選んだものを選び直す必要はないですか？

unipulin

2021/10/26 10:16

https://youtu.be/bNtyTGBtbK4この動画の8:40で出ているものと同じ形になると思います。上に1.2を入力してくださいと記して四角の中に入力してもらう形です。画像はhtml側で表示してそれの答えをpromptで入力するだけです。高校の課題なのですごく初歩的なものだと思います。 1ページ内で済ますつもりで、選び直しの必要はないです。

yambejp

2021/10/26 10:22

選択肢を選ばせる設問にpromptは出番がありません回答してあるのでいちど確認してみてください

unipulin

2021/10/28 06:19

サンプルを送ってくださったの見落としていましたありがとうございます。この課題の条件が順次処理や分岐を入れるものだったので授業で習ったpromptで考えていました。promptであれば1ページ内で何回も問題を出せると思うので1ページ内で済ますと回答したのですが、1問ごとに選択肢を記載した画像を差し込みたいと思っているので、送ってくださったサンプルのような形のものであれば1問ごとに次のページに飛ぶ形になるのだと思います。説明と理解力に乏しく申し訳ありません。

行動規範の内容に同意します

回答2件

sample

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#btn').disabled=true;
4  document.querySelector('#btn').addEventListener('click',()=>{
5    const point=[...document.querySelectorAll('.q:checked')].map(x=>parseInt(x.value)).reduce((x,y)=>x+y);
6    alert(point);
7  });
8});
9document.addEventListener('change',()=>{
10  if(document.querySelectorAll('.q:checked').length>=5){
11    document.querySelector('#btn').disabled=false;
12  }
13});
14</script>
15<form>
16<fieldset>
17<legend>Q1</legend>
18<label><input type="radio" name="q1" class="q" value="10">A</label>
19<label><input type="radio" name="q1" class="q" value="5">B</label>
20</fieldset>
21<fieldset>
22<legend>Q2</legend>
23<label><input type="radio" name="q2" class="q" value="10">A</label>
24<label><input type="radio" name="q2" class="q" value="5">B</label>
25</fieldset>
26<fieldset>
27<legend>Q3</legend>
28<label><input type="radio" name="q3" class="q" value="10">A</label>
29<label><input type="radio" name="q3" class="q" value="5">B</label>
30</fieldset>
31<fieldset>
32<legend>Q4</legend>
33<label><input type="radio" name="q4" class="q" value="10">A</label>
34<label><input type="radio" name="q4" class="q"s value="5">B</label>
35</fieldset>
36<fieldset>
37<legend>Q5</legend>
38<label><input type="radio" name="q5" class="q" value="10">A</label>
39<label><input type="radio" name="q5" class="q" value="5">B</label>
40</fieldset>
41<input type="button" value="評価" id="btn">
42</form>