どのキャラのスコアが一番高かったか調べるためにTotalScoreを突っ込んだ配列を定義します（104行目～）
var totalScoreArray =
[ykTotalScore,ngTotalScore,ntTotalScore,
htTotalScore,hnTotalScore,hkTotalScore,knTotalScore,
yuTotalScore,rkTotalScore,caTotalScore]
totalScoreArray のなかで一番でかいtotalScoreのキャラを調べます（108行目～）
ykTotalScoreが一番でかい場合はlv=0を設定…みたいな感じです
switch(true){
case Math.max(...totalScoreArray) == ykTotalScore:
var lv = 0;
break;
case Math.max(...totalScoreArray) == ngTotalScore:
var lv = 1;
break;
case Math.max(...totalScoreArray) == ntTotalScore:
var lv = 2;
break;
case Math.max(...totalScoreArray) == htTotalScore:
var lv = 3;
break;
case Math.max(...totalScoreArray) == hnTotalScore:
var lv = 4;
break;
case Math.max(...totalScoreArray) == hkTotalScore:
var lv = 5;
break;
case Math.max(...totalScoreArray) == knTotalScore:
var lv = 6;
break;
case Math.max(...totalScoreArray) == yuTotalScore:
var lv = 7;
break;
case Math.max(...totalScoreArray) == rkTotalScore:
var lv = 8;
break;
case Math.max(...totalScoreArray) == caTotalScore:
var lv = 9;
break;
default:
}
キャラ診断作ったので、8割がた「初心者向けのjquery入門講座」さんを参考に作ったんですが残りの２割の内容を備忘録的にメモしようかな～～という記事です
講座通りに作ったところは省いてます
あとめちゃくちゃ素人の自分用なので内容間違ってたり不格好なコードだったりするのでご了承ください～～～
めちゃ長くなったので追記で
追加した機能は大きく分けてキャラごとの得点管理と１問戻るボタンの実装の二つなので、今回はキャラごとの得点管理について書いていきます
まずscoreArrayを人数分作ります ソースで言うと↓ですね(13行目～)
定義なのであんまり深く考えなくていい
ykScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
ngScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
ntScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
htScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
hnScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
hkScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
knScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
yuScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
rkScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
caScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
TotalScoreも人数分作っちゃいます（23行目～）
参考元ではresultFunc内で定義してるからそこでもいい気がする なんで最初に定義してるのか我ながら謎です
これも定義なのであんまり深く考えなくていい
ykTotalScore = 0;
ngTotalScore = 0;
ntTotalScore = 0;
htTotalScore = 0;
hnTotalScore = 0;
hkTotalScore = 0;
knTotalScore = 0;
yuTotalScore = 0;
rkTotalScore = 0;
caTotalScore = 0;
それぞれのScoreArrayに得点詰めるときに使用するMapを作ります（50行目～）
これも定義なのであんまり深く考えなくていい
let charMap = {yksc:ykScoreArray,ngsc:ngScoreArray,
ntsc:ntScoreArray,htsc:htScoreArray,hnsc:hnScoreArray,
hksc:hkScoreArray,knsc:knScoreArray,
yusc:yuScoreArray,rksc:rkScoreArray,casc:caScoreArray}
回答するごとに、定義したMapを使って得点を各キャラのScoreArrayに詰めていきます。（60行目～）
key は上のMapで言うところのykscとかngscとかです
charMap[key] はkey=ykscの場合はykScoreArrayとなります
charMap[key][qID] はkey=yksc、qID=0の場合はykScoreArray の０番目ということなので、
ykScoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];太字の部分になります
処理の流れを説明すると、
(1) charMapについてkeyごとに{}内の処理を繰り返すよ～～って感じです
以下key=yksc、qID=0の場合
(2) クリックされた選択肢のykscが数字かどうかを見てます 数字だったら{}内の処理に入っていきます そうじゃなかったら(4)の処理に行きます
(3) クリックされた選択肢のykscの数字（点数）をykScoreArrayの０番目の要素として設定します
(4) ykscが設定されてない選択肢を選んだ場合、０を設定します
(2)~(4)をcascまで繰り返して得点を各キャラのScoreArrayに設定します
for (let key in charMap) { //(1)
if (!isNaN(Number($(this).attr(key)))) { //(2)
charMap[key][qID] = Number($(this).attr(key)); //(3)
}else{
charMap[key][qID] = 0; //(4)
}
}
自分でも存在をわすれていたreducerの定義です（78行目）
忘れているだけあってあんまり意味わかってないです 変数名もてきとうです おそらく何でもよいです
「jquery 合計 array」とかでググるといい感じの解説出てくると思います（丸投げ）
const reducer = (accumulator, currentValue) => accumulator + currentValue;
上で設定したreducerを使って各ScoreArrayの要素を合計します（93行目～）
合計値は各キャラのTotalScoreに設定します。
横着してるけど多分これループで処理した方がコードの見た目すっきりしますね めんどくさいのでしませんが…
参考元ソースの50~52行目のfor文をキャラの人数分やるという手もある
ますます私がよくわかってないreducerを使ったのかわけがわからんな…
ykTotalScore = ykScoreArray.reduce(reducer);
ngTotalScore = ngScoreArray.reduce(reducer);
ntTotalScore = ntScoreArray.reduce(reducer);
htTotalScore = htScoreArray.reduce(reducer);
hnTotalScore = hnScoreArray.reduce(reducer);
hkTotalScore = hkScoreArray.reduce(reducer);
knTotalScore = knScoreArray.reduce(reducer);
yuTotalScore = yuScoreArray.reduce(reducer);
rkTotalScore = rkScoreArray.reduce(reducer);
caTotalScore = caScoreArray.reduce(reducer);
どのキャラのスコアが一番高かったか調べるためにTotalScoreを突っ込んだ配列を定義します（104行目～）
var totalScoreArray =
[ykTotalScore,ngTotalScore,ntTotalScore,
htTotalScore,hnTotalScore,hkTotalScore,knTotalScore,
yuTotalScore,rkTotalScore,caTotalScore]
totalScoreArray のなかで一番でかいtotalScoreのキャラを調べます（108行目～）
ykTotalScoreが一番でかい場合はlv=0を設定…みたいな感じです
switch(true){
case Math.max(...totalScoreArray) == ykTotalScore:
var lv = 0;
break;
case Math.max(...totalScoreArray) == ngTotalScore:
var lv = 1;
break;
case Math.max(...totalScoreArray) == ntTotalScore:
var lv = 2;
break;
case Math.max(...totalScoreArray) == htTotalScore:
var lv = 3;
break;
case Math.max(...totalScoreArray) == hnTotalScore:
var lv = 4;
break;
case Math.max(...totalScoreArray) == hkTotalScore:
var lv = 5;
break;
case Math.max(...totalScoreArray) == knTotalScore:
var lv = 6;
break;
case Math.max(...totalScoreArray) == yuTotalScore:
var lv = 7;
break;
case Math.max(...totalScoreArray) == rkTotalScore:
var lv = 8;
break;
case Math.max(...totalScoreArray) == caTotalScore:
var lv = 9;
break;
default:
}
script部分で変えたのはこんなところです 見逃しあったらごめーんね
あとはそれぞれの選択肢にykscとかngscとかをちまちま点数設定してます（193行目～）
アウトドア派を選ぶとntscとhnscとknscに点数が入ります それ以外のキャラは０点
点数がみんなおなじじゃなくて５点だったり１０点だったりしてるのは傾斜配点みたいなあれですね
ちなみに完答でtotalScoreが100になるように設定してます
<li id="0_0" ntsc="10" hnsc="5" knsc="5">アウトドア派</li>
<li id="0_1" yksc="5" hksc="5" casc="5">インドア派</li>
<li id="0_2" htsc="5" yusc="10">どちらも好き</li>
<li id="0_3" ngsc="10" rksc="10">遊ぶのは好きじゃない</li>
一問戻るボタンの方は余力があれば書くかもしれん 書かないかもしれない
ではでは
×閉じる