アンケート回答後の挙動を変更したい

コミュニティ

アンケート回答後の挙動を変更したい

トピックス by kyoka 33 pt 2023年12月20日 17:20 207 PV
［該当ページ］

https://sb-preview.squadbeyond.com/articles/QyLRhbeXOczCrrpg/preview?utm_medium=789d5148-98aa-4f65-9e72-faa6116709f9

［該当箇所］

https://gyazo.com/31bc7e5db4147e8e2b173460c22eb250

［ご相談内容］

Q4に「回答を完了する」ボタンをつけ、回答後に「回答ありがとうございました」の画像や遷移ボタンをつけたいです。
kyoka 11 月, 1 週間前 2 人 · 3 コメント
3 コメント

widgetマスター

モデレータ
2023年12月20日 17:22

ご相談ありがとうございます！

確認します！

widgetマスター

モデレータ

2023年12月22日 13:20

お待たせいたしました🙌

修正方法を案内させていただきます！

①「回答を完了する」ボタンを追加

HTMLの116行目「<p class=”quiz_cont_progress”><span>4</span>/4</p>」の後に下記記述を追加

<div class="wrap-btn-forword"><button onclick="quizResultNotChange.questionFoward(this)" class="btn-forword js-btn-forword" type="button">回答を完了する</button></div>

https://t.gyazo.com/teams/squadbeyond/dcda4be18184b88a56b0245767959a69.png

②回答後のコンテンツを隠せるように移動する

HTMLの117行目から125行目の記述を削除

https://t.gyazo.com/teams/squadbeyond/89bd73a28d44b996497bcd70a59843de.png

121行目「 <div class=”quiz_result is-hidden” id=””></div>」の間に下記記述を追加

<p class="quiz_cont_image"><video allowfullscreen="true" autoplay="true" controlslist="nodownload" loop="true" muted="true" name="media" playsinline="" class="lazyload">
                                <source type="video/mp4" src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3041519/a72da37f-8983-46b4-906b-ef64949da34b.mp4">
                            </video></p>
                    <br>
                    <div class="downArrow movebtn"><span></span><span></span><span></span></div>
                    <div class="btn-area"><!--下記ooooo部分にリンク先URLを置いてください。もしくは左の表示されているボタンテキストを選択した後に上部のリンクボタンから追加可能--><a href="https://tsugitsugi-m.com/register?sb_tracking=true">
                            <font face="sans-serif">かんたん無料登録で<br>ホテルをみてみる</font>
                        </a></div>

https://t.gyazo.com/teams/squadbeyond/a27b8de23550333ff638220dff663d4a.png

③CSSの調節を行う

421行目を削除

変更前

.quiz_result {
  padding: 0 10px;
  display: flex;
  width: auto;
  justify-content: center;
  position: relative;
}

変更後

.quiz_result {
  padding: 0 10px;
  width: auto;
  justify-content: center;
  position: relative;
}

下記記述を一番下に追加

.video-container {
            position: relative;
            width: 513px; /* ビデオの幅に合わせる */
            height: 578px; /* ビデオの高さに合わせる */
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* アスペクト比を保ちながらコンテナに収める */
        }

プレビュー：https://sb-draft-preview.squadbeyond.com/articles/ZiMkearyupxnQG_pqew/draft?token=fa1808fae6a25f1156e1525244457b4a

kyoka

メンバー
2023年12月22日 13:40

ありがとうございます！

widgetマスター

widgetマスター

kyoka