WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ クイズ後の回答を出し分けしたい

タグ付き: ,

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

    トピックス by widget初心者 ユーザーランク 1792 pt  2023年10月30日 12:19 117 PV

    【Widget名】

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

    【相談内容

    クイズに回答した後に出てくるリンク先付きのバナーを回答が正解だった場合と不正解だった場合とで出し分けられるようにしたいです。

    widgetマスター   6 月, 4 数週間前 2 人 · 1 コメント
  • 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