• 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