jquery、診断コンテンツ作成

Question

jqueryで診断コンテンツを作りたいのですが
具体的には1つの画面で、２つの選択肢の質問に３０問位答える形です。
裏の設定として８項目（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 = '結果１';
        } else if( total > 3 ) {
            result = '結果２';
        } else if( total > 0) {
            result = '結果２';
        } else {
            result = '何も選択されていません';
        }            
        $('#result').html(result);
    }
});

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

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

Comments

[Lhankor_Mhy]

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

[his2]

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

[Lhankor_Mhy]

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

[his2]

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

Answer 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);

Comments

[his2]

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

Answer 2

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

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

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

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

..Q3,Q4に続く..

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

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

Comments

[his2]

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