彩りの大地 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="quin(this, 5)"><br>
<div id="anst10">
採点結果はここに出力されます。
</div>

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

Javascriptソース


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

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

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

// クイズスクリプト 判定箇所共通
function qucl(lst, qnum) {
    let pta = 0;
    const scoreOffset = Math.ceil(qnum / 5) * 5;
    
    for (let i = 0; i < qnum; i++) {
        const qar = document.getElementsByName("q" + zpf(i, 2));
        const checkedIndex = Array.from(qar).findIndex(radio => radio.checked);
        
        if (checkedIndex !== -1 && checkedIndex === qua(lst, i)) {
            pta += qua(lst, i + scoreOffset);
        }
    }
    return pta;
}

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

// クイズスクリプト 選択リセット処理共通
function qurs(ced, qnum) {
    for (let i = 0; i < qnum; i++) {
        const qar = document.getElementsByName("q" + zpf(i, 2));
        if (qar.length === 0) continue;
        
        if (ced >= 0 && qar[ced]) {
            qar[ced].checked = true;
        } else if (ced === -1) {
            qar[qar.length - 1].checked = true;
        } else if (ced === -2) {
            qar.forEach(radio => radio.checked = false);
        }
    }
}