彩りの大地 Laboratory /クイズスクリプト

HTML

// まずは選択肢部分　部分的な文言については割愛

// 1問目
<label><input type="radio" name="q00">新潟</label><br>
<label><input type="radio" name="q00">東京</label><br>
<label><input type="radio" name="q00">大阪</label><br>
<label><input type="radio" name="q00" checked="checked">未選択</label><br>

// 2問目
<label><input type="radio" name="q01">新潟</label><br>
<label><input type="radio" name="q01">東京</label><br>
<label><input type="radio" name="q01">大阪</label><br>
<label><input type="radio" name="q01" checked="checked">未選択</label><br>

// 3問目
<label><input type="radio" name="q02">新潟</label><br>
<label><input type="radio" name="q02">東京</label><br>
<label><input type="radio" name="q02">大阪</label><br>
<label><input type="radio" name="q02" checked="checked">未選択</label><br>

// 4問目
// name の値をいじればいいということで以下略


// つづいて採点ボタンおよび採点結果出力部分　こちらも部分的な文言については割愛

// パターンその1
<input type="button" id="inst10" value="採点" onclick="quizInputCorrect(this, 5)"><br>
<div id="anst10">
採点結果はここに出力されます。
</div>

// パターンその2
<input type="button" id="hoge" value="採点" onclick="quizInputCorrect(this, 5)"><br>
<div id="hogeoutt">
採点結果はここに出力されます。
</div>

Javascriptソース


// クイズスクリプト 配点表
function quizAnswerDataTable(){
    return [[0,0,0,0,0]];
}

// クイズスクリプト 
function quizInputCorrect(obj, quizNum){
    const valueId = obj.id;
    
    const point = quizScoreCorrect(0, quizNum);
    const gFlg = (point >= 100) ? 0 : 1; 
    const htmlStringArray = [
            "出直してこい！<br>\n",
            "ちょっとちょっと、そんなんで本当に大丈夫！？<br>\n",
            "待て待て待て、こんな簡単な問題がわからないとは。。。<br>\n",
            "あともうちょっと……ってレベルじゃないでしょ！ これぐらいちゃんと答えなさいよね！<br>\n",
            "おーい、いい加減に全部正解しろよ。。<br>\n",
            "そうです、答えは全部「新潟」です。新潟県民だから新潟びいきなんだろ？<br>\n" +
            "うーん、少し違うな。よく見てみなさいな、そもそも選択肢に”県”が他にないんだよ。<br>\n"
        ];
    const messageIndex = point / 20;
    
    const htmlString = `
        <p class='fr_tx'>
            ${point >= 100 ? 'おめでとうございます、' : '残念ですが、'}採点結果は
            <span class='pkup3 lg_at'>${point}点</span>でした。<br>
            ${htmlStringArray[messageIndex]}<br>
        </p>
    `;
    
    quizNtbrSet(valueId, htmlString, gFlg);
}

// クイズスクリプト 配点
function quizScoreMerge(page, questionNum) {
    // 5問クイズなので、anstが5以上（配点要求）なら一律20点を返す
    if (questionNum >= 5) return 20;
    
    return quizAnswerDataTable()[pagepg][questionNum];
}

// クイズスクリプト 判定箇所共通
function quizScoreCorrect(list, quizNum) {
    let point = 0;
    const scoreOffset = Math.ceil(quizNum / 5) * 5;
    
    for (let i = 0; i < quizNum; i++) {
        const quizNumId = document.getElementsByName("q" + zeroPad(i, 2));
        const checkedIndex = Array.from(quizNumId).findIndex(radio => radio.checked);
        
        if (checkedIndex !== -1 && checkedIndex === quizScoreMerge(list, i)) {
            point += quizScoreMerge(list, i + scoreOffset);
        }
    }
    return point;
}

// クイズスクリプト 表示処理共通
function quizNtbrSet(valueId, str, gFlg) {
    let elementIdI, elementIdX;
    
    if (valueId.slice(0, 4) === "inst") {
        elementIdI = "anst" + valueId.slice(4);
        elementIdX = "ansx" + valueId.slice(4);
    } else {
        elementIdI = valueId + "outt";
        elementIdX = valueId + "outx";
    }
    
    const targetIn = document.getElementById(elementIdI);
    if (targetIn) targetIn.innerHTML = str;
    
    const element = document.getElementById(elementIdX);
    if (element) {
        if (gFlg === 1) {
            // クラス側の display: none を力づくで上書きするため、
            // タグ名が SPAN なら "inline"、それ以外（DIV等）なら "block" を明示的に指定する
            element.style.display = (element.tagName === "SPAN") ? "inline" : "block";
        } else {
            element.style.display = "none";
        }
    }
}

// クイズスクリプト 選択リセット処理共通
function quizSelectReset(rFlg, quizNum) {
    /*
        rFlg ： 選択肢の初期位置の設定
            -1 選択肢の一番下 / -2 選択肢を消す
    */
    for (let i = 0; i < quizNum; i++) {
        const quizNum = document.getElementsByName("q" + zeroPad(i, 2));
        if (quizNum.length === 0) continue;
        
        if (ced >= 0 && quizNum[rFlg]) {
            quizNum[rFlg].checked = true;
        } else if (rFlg === -1) {
            quizNum[rFlg.length - 1].checked = true;
        } else if (rFlg === -2) {
            quizNum.forEach(radio => radio.checked = false);
        }
    }
}

// オマケ機能：ゼロパディング(実装しているので同梱)
function zeroPad(num, len, decimalLen = 0) {
    // num.toFixed(len); 機能も同時実装！
    // 使い方：
    // zeroPad(5, 2)		-> "05" （整数部2桁）
    // zeroPad(1.2, 4, 2)	-> "0001.20" （整数部4桁、小数部2桁でパディング）
    
    // 小数点以下の指定があれば先に固定
    let str = decimalLen > 0 ? num.toFixed(decimalLen) : num.toString();
    
    // 整数部のパディング（小数点の左側だけをターゲットにする）
    const parts = str.split('.');
    parts[0] = parts[0].padStart(len, '0');
    
    return parts.join('.');
}