-
アンケートを回答したら要素ができるようにしたい
トピックス by
1792 pt
2023年12月21日 16:01
240
PV
【相談内容】
アンケートの最終問題回答後に、下のオファー・ボタンを表示するように設定したいです。
【相談ページ】
-
1 コメント
-
修正方法を案内させていただきます🙌
① 最後の設問のある Widget の大枠にクラスを追加
最後の設問のある Widget の大枠に final-question というクラス名を追加して下さい。
<div class="blackwood_box final-question"> <!-- ← ここに final-question を追加してます --> <div class="choices_box"> <!-- 1つ分の選択肢はここからコピー。 --> <input type="checkbox" name="choice04" id="choice04-1" class="selecter"> <label for="choice04-1" class="choice-check" style="text-align: center;"> <font face="serif" style="">記憶力 <span style="font-size: 13px;" class="sb-fs-free">※1</span>を維持したい </font> </label> <!-- 1つ分の選択肢はここまでコピー -->② ボタンのある Widget のHTML構成を変更
ボタンのある Widget のHTML構成を下記にしてください。
また ＼申込1分／ のテキストもこの中に移動してください。
画像もこの中に移動してください。
<div class="final-answer-area">
<div class="abc">
<img src="https://file.mysquadbeyond.com/uploads/article_photo/photo/3394189/f967dd39-9d65-490c-b719-19b07b867dfe.png" height="463" width="463" draggable="false" class="lazyload">
</div>
<div style="font-family: serif; text-align: center;"><strong style="color: rgb(250, 99, 99); font-size: 21px;"><br> ＼申込1分／
</strong></div>
<div class="btn-area"><!--下記ooooo部分にリンク先URLを置いてください。もしくは左に表示のボタンテキストを選択した後に上部のリンクボタンから追加可能--><a href="ooooo">
<font color="#ffffff" style="" face="serif">無料で<br>お得にはじめてみる</font>
</a></div>
</div>
③CSSに下記コードを追加
.abc {
display: flex;
justify-content: center;
align-items: center;
}
④ Javascript body に下記コードを追加
<script> const finalAnswerArea = document.querySelector('.final-answer-area'); const finalQuestion = document.querySelector('.final-question'); const choicesBox = finalQuestion.querySelector('.choices_box'); finalAnswerArea.style.display = 'none'; choicesBox.addEventListener('click', () => { finalAnswerArea.style.display = 'block'; }); </script>【修正後プレビュー】