質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

JavaScript 診断テストをつくりたい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,029

score 18

前提・実現したいこと

Javascriptを使って性格診断テストを作りたい。

まだ完成ではなく
『複数クリックしても最後のものだけ色を付けるようにする。』
『入力したものをデータベースに取り込む』
という所のイメージがついていません。

特にさわったばかりで、JavaScriptで選択したデータはデータベースにそもそも取り込めるのかもわかりません。どういった関数でプログラムを作っていけるんでしょうか?
また、最後のものだけに色を付けるやり方も今のクラスを付与する形のものをいじくったらできますでしょうか?

そもそも診断テストならもっと簡単な形がいいんでしょうか(^-^;

該当のソースコード

'use strict';

{
  const question = document.getElementById('question'); //constで値を変えないものとして代入
  const btn = document.getElementById('btn'); //getElementById指定したIDに会ったドキュメントを取得
  const choices = document.getElementById('choices'); //

  const quizSet = [
    {q: 'What is A?', c: ['A0', 'A1', 'A2']},
    {q: 'What is B?', c: ['B0', 'B1', 'B2']},
    {q: 'What is D?', c: ['C0', 'C1', 'C2']},
    {q: 'What is E?', c: ['C0', 'C1', 'C2']},
    {q: 'What is F?', c: ['C0', 'C1', 'C2']},
    {q: 'What is G?', c: ['C0', 'C1', 'C2']},
    {q: 'What is H?', c: ['C0', 'C1', 'C2']},
    {q: 'What is I?', c: ['C0', 'C1', 'C2']},
    {q: 'What is J?', c: ['C0', 'C1', 'C2']},
  ];
  let currentNum = 0;
  let isAnswered;

  function shuffle(arr) { 
    return arr;
  }

  function checkAnswer(li) {
    if(isAnswered){
      return;
    }
      li.classList.add('correct');
      btn.classList.remove('disabled');
  }
  function setQuiz() {
    isAnswered = false;

    question.textContent = quizSet[currentNum].q;

    while (choices.firstChild) {
      choices.removeChild(choices.firstChild);
    }

    const shuffledChoices = shuffle([...quizSet[currentNum].c]);
    shuffledChoices.forEach(choice => { //アロー関数?
      const li = document.createElement('li');
      li.textContent = choice;
      li.addEventListener('click', () => {
        checkAnswer(li);
      });
      choices.appendChild(li);
    });
  }

  setQuiz();
  btn.addEventListener('click', () => {
    currentNum++;
    setQuiz();
  });
}
      <div class ="container2">
        <p id="question"></p>
      <ul id="choices"></ul>
      <div id="btn" class="disabled">Next</div>
    </div>
/* 診断テスト*/
.container2 {
  width: 400px;
  margin: 8px auto;
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  position: relative;
}

#question{
    margin-bottom: 16px;
    font-weight: bold;
}

#choices {
    list-style: none;
    padding: 0;
    margin-bottom: 16px;
}

#choices li{
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
  #choices li:hover {
  background: #f8f8f8;
}

    #choices li.correct{
        background: #d4edda;
        border-color: #c3e6cd;
        color: #155724;
        font-weight: bold;
    }

#btn{
    background: #3498db;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 0 #2880b9;
}
#btn.disabled{
    background: #ccc;
    box-shadow: 0 4px 0 #bbb;
    opacity: 0.7;
}

試したこと

サンプルやテキストを参考に少しいじくって形は完成ではないですが、一応作れました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • papinianus

    2019/06/18 18:11

    私に回答依頼なさったのはGoogleフォームでやりたいということですか?

    キャンセル

  • m.ts10806

    2019/06/20 09:18

    >一応作れました。
    自身で具体的に回答にして解決済みにしておいてください。

    キャンセル

回答 2

checkベストアンサー

+2

質問の要点がまったくわからないのですが、疑問文になっている箇所だけ

どういった関数でプログラムを作っていけるんでしょうか?

答えはありません。プログラマが「この方法がいい」と思って、最終的に実現できているのなら、それが(その人にとっての)正解です。

また、最後のものだけに色を付けるやり方も今のクラスを付与する形のものをいじくったらできますでしょうか?

できる、できないのレベルであれば、「いじくったら(そういう機能にしたら)できる」ということになります。

そもそも診断テストならもっと簡単な形がいいんでしょうか(^-^; 

それはプログラマ本人(および共同開発者等の利害関係者)が考えることであって、第三者には判断できません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

どういった関数でプログラムを作っていけるんでしょうか?

まずどういった関数(メソッド)があるのか勉強しましょう。
コードを見た限りではドットインストールの「JavaScriptで三択クイズを作ろう」の
コードをコピペして自身で少し変更した程度でメソッドなどをよく理解できていないようなので
もっと勉強したほうが良いです。
(例: shuffleという関数で配列をそのまま返す無駄な処理があるなど)
https://dotinstall.com/lessons/quiz_js_v2

また、最後のものだけに色を付けるやり方も今のクラスを付与する形のものをいじくったらできますでしょうか?

当たり前ですが勉強すればできます
勉強しなければできないです。

そもそも診断テストならもっと簡単な形がいいんでしょうか(^-^; 

それ以前に質問に記載されているコードは
複数選択ができ、選択したら解除ができないので
診断テストとして見たら論外なので修正が必要です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る