クイズ後の回答を出し分けしたい | コミュニティ

タグ付き： widget, クイズ

コミュニティ

クイズ後の回答を出し分けしたい

トピックス by widget初心者 1792 pt 2023年10月30日 12:19 278 PV
【Widget名】

クイズ形式（回答後、リンク表示）※要javascript

【相談内容】

クイズに回答した後に出てくるリンク先付きのバナーを回答が正解だった場合と不正解だった場合とで出し分けられるようにしたいです。
widgetマスター 1 年前 2 人 · 1 コメント
- widget
- クイズ
1 コメント

widgetマスター

モデレータ

2023年10月30日 12:22

下記のようにWidgetを変更してみてください！

javascriptとHTMLは変更部分のみ記載しているので記述を探して上書きしてもらえればOKです！

javascript

修正前

choiceboxes.forEach(function(choicebox) {
    let input = choicebox.querySelector('input');
    input.addEventListener('click', function(e) {
        const clickItem = e.target;
        clickItem.disabled = true;
        clickItem.parentNode.classList.add(clickClass);
        setView();
    }, false);
});

修正後

choiceboxes.forEach(function(choicebox) {
    let input = choicebox.querySelector('input');
    input.addEventListener('click', function(e) {
        const clickItem = e.target;
        clickItem.disabled = true;
        clickItem.parentNode.classList.add(clickClass);
        if (clickItem.closest('.choicebox').classList.contains('correct')) {
            btn.classList.add('correct');
        } else {
            btn.classList.add('incorrect');
        }
        setView();
    }, false);
});

CSS

下記記述を追加

 .btn__box>.correct,
 .btn__box>.incorrect {
  display: none;
}
 .btn__box.correct>.correct,
 .btn__box.incorrect>.incorrect {
  display: block;
}

HTML

回答後に表示部分を下記のように変更し、それぞれ出し分けたい内容をいれてください

<div class="btn__box js-btn">
    <div class="correct">
        ～正解の時の記述～
    </div>
    <div class="incorrect">
        ～不正解の時の記述～
    </div>
</div>

参考例：

https://sb-draft-preview.squadbeyond.com/articles/JnNVrIVmQHwjWUluAywkQ/draft?token=eb202cc07060f866f2bb3d5abb5682bd