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

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

ただいまの
回答率

90.49%

  • jQuery

    6719questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jquery、診断コンテンツ作成

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 348

his2

score 2

jqueryで診断コンテンツを作りたいのですが
具体的には1つの画面で、2つの選択肢の質問に30問位答える形です。
裏の設定として8項目(a,b,c,d,e,f,g,h)あり、回答を選択すると、いずれか一つの項目にポイントが加算され
最終的にどの項目が高いかで、結果が出るものを作成したいのです。

ネットでしらべたところ

html

    <legend>Q1</legend>
    <label><input type="radio" name="c1" value="1" /> A1</label>
    <label><input type="radio" name="c1" value="2" /> A2</label>
    <label><input type="radio" name="c1" value="3" /> A3</label>

    <legend>Q2</legend>
    <label><input type="radio" name="c2" value="1" />A4</label>
    <label><input type="radio" name="c2" value="2" />A5</label>
    <label><input type="radio" name="c2" value="3" />A6</label>

    <legend>Q3</legend>
    <label><input type="radio" name="c3" value="1" />A7</label>
    <label><input type="radio" name="c3" value="2" />A8</label>
    <label><input type="radio" name="c3" value="3" />A9</label>

<button id="check">Check</button>
<div id="result"></div>


js

$(function(){
    $radio = $(':radio');

    $('#check').click(check);//診断ボタン押させる

    function check(){
        var total = 0;
        var result = '';        

        $radio.filter(':checked').map(function(){
            total += Number(this.value);
        });

        alert(total);

        if (total > 6) {
            result = '結果1';
        } else if( total > 3 ) {
            result = '結果2';
        } else if( total > 0) {
            result = '結果2';
        } else {
            result = '何も選択されていません';
        }            
        $('#result').html(result);
    }
});


までは発見したのですが、これでは変数が1つしか使えず、変数を8個使う方法が分かりません。

どなたかご回答よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • Lhankor_Mhy

    2018/04/28 12:05

    『裏の設定』はどのようなデータになっていますか? その部分のコードをご提示ください。

    キャンセル

  • his2

    2018/04/28 12:12

    すみませんが、全くコードを書いていません。8項目(8個の変数)の中で一番得点が高いものと2番目に得点が高いものが何だったかによって診断結果を出すもので、単純に比較しようかなと思っていましたがjqueryは初めてなのでまだ調べていません。申し訳ありません。

    キャンセル

  • Lhankor_Mhy

    2018/04/28 12:19

    なるほど。Q1がa、Q2がc、などの『裏の設定』をデータ化する必要があるかと思いますが、実際には書いていなくても予定で結構ですので、どのように書くのかご提示ください。

    キャンセル

  • his2

    2018/04/28 13:02

    申し訳ありませんが、調べてからお答えしようと思います。

    キャンセル

回答 2

+1

こちらのサイト様のようなものを作りたいんですよね?
http://www.siyasui.ne.jp/android/uranai/ketueki/nanigatakei.htm

試しに血液型で10問作成してみました。
各血液型へのポイント配分については、適当にやりました。

ひとまず、ポイントが一番高いものだけ結果表示します。
本来は、2番目に高いものと比べるとのことで、
アルゴリズム思いつき次第、コード編集いたします。

<div id="questionWrap"></div>
<button id="check">Check</button>
<div id="result"></div>
const $questionWrap = $('#questionWrap')
const $result = $('#result')

//declare CONST_VAL
const BLOOD_TYPE = {
  A: 'A',
  B: 'B',
  O: 'O',
  AB: 'AB',
}
const ANSWER = {
  YES: 'yes',
  NO: 'no',
}
const BLOOD_TYPE_IDX = {
  YES: 1,
  NO: 2,
}
const QUESTION_TEXT_IDX = 0;


const questionList = [//[text, if yes, if no]
  ['自分は良く気配が出来る人だと思う。', BLOOD_TYPE.A, BLOOD_TYPE.B],
  ['自分は、神経がこまやかだと思う。', BLOOD_TYPE.A, BLOOD_TYPE.O],
  ['人の気持ちを敏感に感じとる。', BLOOD_TYPE.AB, BLOOD_TYPE.O],
  ['自分は思いやりがある方だと思う。', BLOOD_TYPE.O, BLOOD_TYPE.B],
  ['自分は、サービス精神旺盛だと思う。', BLOOD_TYPE.A, BLOOD_TYPE.B],
  ['自分は、争い事を避けるために自分を抑えることが多いと思う。', BLOOD_TYPE.AB, BLOOD_TYPE.B],
  ['自分は、慎重堅実で完全に納得しないと行動しないと思う。 ', BLOOD_TYPE.A, BLOOD_TYPE.B],
  ['自分は、どちらかと言うとハメをはずさない優等生タイプだと思う。', BLOOD_TYPE.A, BLOOD_TYPE.B],
  ['自分は、潔癖である。', BLOOD_TYPE.A, BLOOD_TYPE.O],
  ['自分は、きれい好きである。', BLOOD_TYPE.A, BLOOD_TYPE.O],
]

const getQuestionDom = ({questionId, questionNum, questionText}) => {
  let str = '';
  str += '<div class="question">';
  str += '<legend>';
  str += `<span>Q${questionNum}:</span>`;
  str += `<span>${questionText}</span>`;
  str += '</legend>';
  str += '<label>';
  str += `<input class="answer-radio" type="radio" name="q${questionNum}" value=${ANSWER.YES} data-question-id=${questionId}/>`;
  str += `<span>${ANSWER.YES}</span>`;
  str += '</label>';
  str += '<label>';
  str += `<input class="answer-radio" type="radio" name="q${questionNum}" value=${ANSWER.NO} data-question-id=${questionId}/>`;
  str += `<span>${ANSWER.NO}</span>`;
  str += '</label>';
  str += '</div>';
  return str;
}

const appendQuestionDom = () => {
  const appendDomStr = questionList.reduce((domStr, question, idx) => {
    return domStr += getQuestionDom({
      questionId: idx,
      questionNum: idx + 1,
      questionText: question[QUESTION_TEXT_IDX]
    })
  }, '');
  $questionWrap.append(appendDomStr)
}
appendQuestionDom();
const $answerRadio = $('.answer-radio');
const initPoint = 0
//init bloodTypeMap
const bloodTypeMap = new Map()
Object.values(BLOOD_TYPE).forEach((bloodType) => {
  bloodTypeMap.set(bloodType, { bloodType, point: initPoint })
})
//init questionMap
const questionMap = new Map()
questionList.forEach((question, idx) => {
  questionMap.set(idx, {
    text: questionList,
    [ANSWER.YES]: {
      addDestination: question[BLOOD_TYPE_IDX.YES],
    },
    [ANSWER.NO]: {
      addDestination: question[BLOOD_TYPE_IDX.NO],
    },
  })
})

const check = () => {
  var total = 0;
  var result = '';
  const addPoint = 1;

  $answerRadio.filter(':checked').map((idx, element) => {
    const questionID = element.dataset.questionId;
    const question = questionMap.get(parseInt(questionID))
    const answer = element.value;
    const addDestination = question[answer].addDestination;
    const bloodType = bloodTypeMap.get(addDestination);
    bloodType.point += addPoint;
  });

  const sortedBloodTypePointsList = Array.from(bloodTypeMap.values()).sort((a, b) => {
    return b.point - a.point;
  })

  $result.text(`一番ポイントが高かった血液型は、${sortedBloodTypePointsList[0].bloodType}型です。`)
}

$('#check').click(check);

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/30 10:29

    ご回答ありがとうございます、具体的なコード大変参考になります。

    キャンセル

0

アルゴリズム的にはこんな感じかなと思います!

A. 選択した物を、裏の設定に当てはめる処理
(e,g,c,dについては例です)

Q1
選択肢1→ 選択すると eを+1する
選択肢2→ 選択すると gを+1する 

Q2
選択肢1→ 選択すると cを+1する
選択肢2→ 選択すると dを+1する

..Q3,Q4に続く..

B. 裏の設定を比較し、どれが一番高いかを比較する処理
チェックボタンを押した際に、aからhまでのどれが一番大きいかを判定する

C. Bの判定に応じて、結果を出力する

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/30 10:29

    ご回答ありがとうございます、参考にいたします。

    キャンセル

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

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

関連した質問

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

  • jQuery

    6719questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。