コミュニティ

続きを読むテスト

トピックス by 詩織ユーザーランク

138 pt 2023年9月5日 16:33 14 PV

https://sb-draft-preview.squadbeyond.com/articles/q-iPJQcrHsWqXZQeyTw/draft?token=0fb2fd7014dbbb389f9c324640e13a66

こちらのページの1問目の動きで問題なければ、すでにWidget内に実装されていますのでご活用ください。

WidgetのHTML欄274行目の説明

■js-result-wrap
<div class="js-result-wrap">...</div>内に設問を設置する事で【特定範囲内の選択肢にすべて答えたら有効になるボタン】機能が有効になります。
設問の設置ルールは同じです。
■reslt-btn
選択肢にすべて答えたら有効化するボタンは class="reslt-btn" というクラスを付与して下さい。

設置方法としては選択肢に答えたら有効化したい設問を<div class=”js-result-wrap”> で囲み、その設問内に対応する<div class=”result-btn”> を付けたボタンを設置する、という形になります。

参考例：

<div class="js-result-wrap">
    <div class="wrap-question" id="q-01">
        <span class="title">Question</span>
        <div class="question">
            <span class="num current">01</span>→
            <span class="num">02</span>→
            <span class="num">03</span>→
            <span class="num">04</span>→
            <span class="num">05</span>
        </div>
        <div class="words">
            ここに文章を追加できます<br>改行してさらに追加が可能
        </div>
        <div class="wrap-img">
            <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/796772/35242dc7-0391-4478-aaa0-f4b18eb11faf.png" class="lazyload" draggable="false" height="380" width="570">
        </div>
        <ul class="check-bg-list">
            <li>
                <label>
                    <input type="checkbox" name="q1" value="1">
                    <span>回答1</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="q1" value="2">
                    <span>回答2</span>
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" name="q1" value="3">
                    <span>回答3</span>
                </label>
            </li>
        </ul>
        <!-- 選択したら有効化のボタン -->
        <div class="checked-link">
            <div class="result-btn"><span class="js-display-change" data-show="#q-02">次へ</span></div>
        </div>
    </div>
</div>

詩織 7 月, 3 数週間前 1 人 · 0 コメント

0 コメント

申し訳ありませんが、返信は見つかりませんでした。