入力型のクイズを作りたい

初心者です。JavaScriptで正解が複数ある入力型のクイズを作りたいのですが、「問題と回答をセットで表示する方法」と「クイズに正解すると得点がつくようにする方法」がわかりません。

今はまだ1問ですが、2問、3問と続け、最終的に合計の点数がわかるようにしたいのですが、調べてもわからなかったため教えていただきたいです。

HTML
1<html>
2<html lang="ja">
3<head>
4　<meta charset="UTF-8">
5　<title>Quiz</title>
6
7  <SCRIPT language="JavaScript">
8    <!--
9      function check(){
10        if(
11           document.que1.answer.value == "ピカチュウ" ||
12           document.que1.answer.value == "ぴかちゅう" ||
13           document.que1.answer.value == "ﾋﾟｶﾁｭｳ"
14        ){
15          alert("正解！")
16        }
17        else{
18          alert("残念！")
19        }
20      }
21      -->
22  </SCRIPT>
23</head>
24
25<body>
26
27<FORM name="que1">
28  Q1)サトシと一緒にいるでんきタイプのポケモンといえば？<br>
29    答え:<INPUT type="text" name="answer">
30      <INPUT type="button" value="回答"onClick="check()">
31
32</body>
33</html>
34

m.ts10806

2019/10/20 11:54

何をどう調べたのでしょうか。キーワードや確認した記事など追記してください(でないと調べたかどうかすら他人には分かりません) JavaScriptのみで実現したいのですか？要件をもう少し具体的に追記してください。

yukikaki

2019/10/20 12:14

3択クイズの作り方や入力フォームを使ったもの、得点の出し方、配列等を調べてみました。それらのサイトを参考にしてためしてみたのですが上手く応用できなかったため質問させていただきました。 3択クイズの参考にしたものは["問題文","選択肢1","2","3"];という形で問題文と選択肢がまとめられていましたが、入力式で、さらに答えが複数ある場合のまとめ方がわかりませんでした。言語に関しては詳しくないため、ブラウザでプレイする事ができればということでJavaScriptを使用したいと思っています。

m.ts10806

2019/10/20 12:16

それらのサイトがなんなのか書かないとわからないという話をしています。正しい内容なのかどうかすらも。ヒントとして同じサイトの記事が提示される可能性もあるわけです。いずれにしても質問本文に追記してください。

yukikaki

2019/10/20 12:24

他にも色々調べていますが、いくつかのサイトを追加しました。

m.ts10806

2019/10/20 12:27

はい。あとは要件です。たとえばユーザー同士で共有したいとかランキングを作りたいとかそうなってくるとクライアントサイドの技術（HTML,CSS,JavaScript）では「不可」となります。そうでなく、「自身だけ」であれば不可能ではないですが、、（直近の回答：https://teratail.com/questions/218241#reply-320310 )

yukikaki

2019/10/20 12:34

正解した得点が一定以上か以下かで表示されるページを分岐させたいだけなので、ユーザー間で共有することはありません。今は正解不正解が出るようにもなっていますが、それも表示せず、順番にクイズを解いて、得点によって分岐が発生する、というものを作りたいと思っています。まだ学習はページの分岐にまで追いついていないのですが…

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

回答4件

タイトルのアプリを作っていくにはもう何段階か踏む必要があります。
まずはWebStorageにて情報を保管していくようにミニマムコードで作ってみてください。

段階としては

固定値を保存して画面表示
入力した内容を同じキーで保存して画面表示
入力した内容を数字にして保存して画面表示
入力した内容を加算して保存して画面表示

ここまで出来ればだいぶやりたいことに近づくはずです。

投稿2019/10/20 12:38

編集2019/10/20 12:44

m.ts10806

総合スコア80850

入力制限するほうが現実的

javascript
1<form>
2<input type="text" name="answer" placeholder="全角カタカナ" pattern="[ァ-タダ-ヶ]+" required>
3<input type="submit" value="send">
4</form>

投稿2019/10/21 01:14

yambejp

総合スコア114775

HTML
1<!DOCTYPE html>
2<html>
3  <html lang= "ja">
4  <head>
5
6  　<meta charset="UTF-8">
7  　<title>Quiz</title>
8  　<link rel="stylesheet" type="text/css" href="q_data.css">
9
10  </head>
11
12  <body>
13
14
15    <div class = "header">
16      <div class = "user-icon">AAA</div>
17      <div class = "user-name">ABC abc</div>
18    </div>
19
20
21    <div class = "text">
22      <div id = "q_text"> 問題文 </div>
23    </div>
24
25    <div class = "form">
26  　  <form name = "AAA" action = "BBB">
27    　<input type = "text" name = "CCC" class = "q_text">
28    　<input type = "button" value = "回答" onclick = "EEE()" class = "button">
29　  </div>
30
31    <div class = "footer">
32      <div class = "header-list">
33        <ul>
34          <li>誤字・脱字に注意してください。</li>
35          <li>わからない場合はそのまま回答ボタンを押してください。</li>
36          <li>ページの更新はしないでください。</li>
37        </ul>
38      </div>
39    </div>
40
41  　<script src = "q_data1.js"></script>
42
43
44  </body>
45</html>

javascript
1var point = 0
2var q_no = 0
3var q_data = [
4    {text   : 'サトシの相棒といえば？',
5     answer : ['ピカチュウ','ぴかちゅう']},
6    {text   : 'ピカチュウの進化前は？',
7     answer : ['ピチュー','ぴちゅー']},
8    {text   : 'ピカチュウの進化後は？',
9     answer : ['ライチュウ','らいちゅう']}
10   ];
11
12
13window.onload = function (){
14document.getElementById("q_text").innerHTML = q_data[q_no].text;
15}
16
17
18function EEE(){
19  if (q_data[q_no].answer.includes(AAA.CCC.value)) {
20	    document.AAA.reset();
21      point++;
22      console.log("正解");
23    }else{
24      document.AAA.reset();
25      console.log("不正解");
26  }
27
28  console.log(point);
29
30  q_no++;
31
32  if (q_no == 3 && point >= 2) {
33      window.location.replace('Quiz2.html');
34  }else if (q_no == 3){
35    window.location.replace('AR1.html');
36    }
37
38  document.getElementById("q_text").innerHTML = q_data[q_no].text;
39}