WEB広告運用の困りごとが集まる場所 › コミュニティ › コミュニティ › アンケートWidgetで回答後に次の設問に動かしたい
-
アンケートWidgetで回答後に次の設問に動かしたい
トピックス by widget初心者 1792 pt 2023年11月14日 19:40 287 PV【相談内容】
記事LP上部のアンケート部分について、1問回答後に2問目の場所へ移動したいのですがうまく動かず、過不足をご教示いただきたいです!
【Widget名】
アンケート選択状態に対応したコンテンツを表示(スクロール・最後の質問に回答すると下部表示)※要javascript
【相談したいページ】
https://sb-preview.squadbeyond.com/articles/nhaOCTq_KxWzopsdzwMg/preview
tomoko sasaki 11 月, 2 数週間前 3 人 · 9 コメント -
9 コメント
-
コードを確認したところ各設問の閉じタグ位置がズレています。
下記の通り修正してください!
①</form>タグ手前の</div>を3つ削除する
②2つ目以降の<div class=”questionArea js-form-radio”>手前に</div>を1つ追加する
※自動スクロールさせたい設問からはno-scrollclassを削除してください
修正内容の説明をしますと下記が各設問のHTML構成なんですが、現在一番下の閉じタグ</div> が抜けてて</form>タグ手前にまとめて追加されちゃってるのでタグの入れ子関係を直そうとしています。
<div class="questionArea js-form-radio">
<div class="question__numBox">...</div>
<h2 class="title">
<span class="mark">Q1</span>今の体型を変えたいと思いますか?<br>
</h2>
<div class="questionImg">...</div>
<div class="linkbox btn-two">...</div>
</div> -
-
上記の通り修正いただければなおるかとおもうので、修正内容が間違っている可能性がありそうです・・・!
修正したページのプレビューとWidget内のHTML, CSSを共有いただきたいです!
よろしくお願いいたします!
-
以下でご確認いただけますと幸いです…!
◾️記事プレビュー
◾️HTML
<script>
var sbScrollRevealEnqueteSelect = sbScrollRevealEnqueteSelect || {};
(function(_) {
const target = ‘.js-scroll-reveal-enquete-select’;
const radioSet = ‘.js-form-radio’;
const setting = {
duration: 600,
};
function getOption(el) {
let option = Object.assign({}, setting);
let dataset = Object.assign({}, el.dataset);
return Object.assign(option, dataset);
}
_.scrollTo = function(end, duration) {
const startTime = Date.now();
const easeOut = (p) => p * (2 – p);
const start = window.pageYOffset;
const range = end – start;
let position = 0;
var move = function() {
const elapsedTime = Date.now() – startTime;
const progress = elapsedTime / duration;
position = start + range * easeOut(progress);
if (progress < 1) {
window.scrollTo(0, position);
requestAnimationFrame(move);
} else {
window.scrollTo(0, end);
return;
}
};
requestAnimationFrame(move);
};
_.scrollEnquete = function(selectors) {
let elList = document.querySelectorAll(selectors);
elList.forEach(function(el) {
let option = getOption(el);
let radioName = [];
let radioList = el.querySelectorAll(‘input[type=”checkbox”]:not([data-ignore]), input[type=”radio”]:not([data-ignore])’);
radioList.forEach((radio) => {
radioName.push(radio.name);
radio.addEventListener(‘change’, (e) => {
let self = e.target;
let list = el.querySelectorAll(radioSet);
let current = self.closest(radioSet);
let currentNo = Array.prototype.indexOf.call(list, current);
let finishBtn = el.querySelector(‘.js-switch-btn’);
let next;
if (list.length > currentNo + 1) {
next = list[currentNo + 1];
} else {
next = finishBtn;
}
let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset;
_.scrollTo(scrollPoint, option.duration);
let btnFlg = true;
let form = el.querySelector(‘form[name=”form-scroll-enquete”]’);
radioName.forEach((name) => {
let radioGroup = form[name];
if (!radioGroup.value) {
btnFlg = false;
}
});
});
});
radioName = new Set(radioName);
});
};
_.revealBtn = function(selectors) {
let elList = document.querySelectorAll(selectors);
elList.forEach(function(el) {
var hiddenClass = ‘is-hidden’;
var completeBtn = el.querySelector(‘.js-send’);
var revealArea = el.querySelector(‘.js-reveal’);
completeBtn.addEventListener(‘click’, function() {
revealArea.classList.toggle(hiddenClass);
});
});
};
_.init = function() {
_.scrollEnquete(target);
_.revealBtn(target);
};
})(sbScrollRevealEnqueteSelect);
</script>
<script>
document.addEventListener(‘DOMContentLoaded’, sbScrollRevealEnqueteWithRevealHiddenCase.init, false);
</script>
<div class=”question-reveal-scroll js-scroll-reveal-enquete-with-reveal”>
<form name=”form-scroll-enquete”>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item current”>01</li>
<li class=”item”>02</li>
<li class=”item”>03</li>
<li class=”item”>04</li>
</ul>
</div>
<h2 class=”title”>
<span class=”mark”>Q1</span>今の体型を変えたいと思いますか?<br>
</h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249985/3e598dff-fb91-422f-9a1d-25973149ca8f.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249985/3e598dff-fb91-422f-9a1d-25973149ca8f.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox btn-two”>
<input id=”q1-1″ type=”radio” name=”q1″ data-show=”q1-1″><label for=”q1-1″>
<div class=”btn”>はい</div>
</label><input id=”q1-2″ type=”radio” name=”q1″ data-show=”q1-2″><label for=”q1-2″>
<div class=”btn”>いいえ</div>
</label>
</div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item”>01</li>
<li class=”item current”>02</li>
<li class=”item”>03</li>
<li class=”item”>04</li>
</ul>
</div>
<h2 class=”title”>
<span class=”mark”>Q2</span>一番気になる部位はどこですか?<br>
</h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249994/3c4798f0-dd3e-432b-b067-65ce5340a4e0.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249994/3c4798f0-dd3e-432b-b067-65ce5340a4e0.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”>
<input id=”q2-1″ type=”radio” name=”q2″ data-show=”q2-1″><label for=”q2-1″>
<div class=”btn”>お腹周り</div>
</label><input id=”q2-2″ type=”radio” name=”q2″ data-show=”q2-2″><label for=”q2-2″>
<div class=”btn”>二の腕</div>
</label><input id=”q2-3″ type=”radio” name=”q2″ data-show=”q2-3″><label for=”q2-3″>
<div class=”btn”>足、太もも</div>
</label><input id=”q2-4″ type=”radio” name=”q2″ data-show=”q2-4″><label for=”q2-4″>
<div class=”btn”>顔まわり</div>
</label>
</div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item”>01</li>
<li class=”item”>02</li>
<li class=”item current”>03</li>
<li class=”item”>04</li>
</ul>
</div>
<h2 class=”title”>
<span class=”mark”>Q3</span>痩せることができたら何がしたいですか?<br>
</h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250021/17141f66-fa6e-48f4-abea-f5f56912e938.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250021/17141f66-fa6e-48f4-abea-f5f56912e938.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”>
<input id=”q3-1″ type=”radio” name=”q3″ data-show=”q3-1″><label for=”q3-1″>
<div class=”btn”>着たかった洋服を着て楽しみたい!</div>
</label><input id=”q3-2″ type=”radio” name=”q3″ data-show=”q3-2″><label for=”q3-2″>
<div class=”btn”>罪悪感なく美味しいものを食べたい!</div>
</label><input id=”q3-3″ type=”radio” name=”q3″ data-show=”q3-3″><label for=”q3-3″>
<div class=”btn”>周りの人から褒められたい!</div>
</label><input id=”q3-4″ type=”radio” name=”q3″ data-show=”q3-4″><label for=”q3-4″>
<div class=”btn”>好きな人にアプローチしたい!</div>
</label>
</div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item”>01</li>
<li class=”item”>02</li>
<li class=”item”>03</li>
<li class=”item current”>04</li>
</ul>
</div>
<h2 class=”title”>
<span class=”mark”>Q4</span>理想の姿になれる医療痩身に興味はありますか?<br>
</h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250029/9b57400a-2fdb-4e8b-9e21-31765a29572e.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250029/9b57400a-2fdb-4e8b-9e21-31765a29572e.png” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div>
<a href=”#heading1″>
<div class=”linkbox btn-two”>
<input id=”q4-1″ type=”radio” name=”q4″ data-show=”q4-1″><label for=”q4-1″>
<div class=”btn”>はい</div>
</label><input id=”q4-2″ type=”radio” name=”q4″ data-show=”q4-2″><label for=”q4-2″>
<div class=”btn”>いいえ</div>
</label>
</div>
<div class=”step_arr”>
<span></span><span></span><span></span>
</div>
</a>
</div>
</form>
</div>
◾️CSS
.question-reveal-scroll {
width: 970px;
max-width: 100%;
font-size: 16px;
background-color: #fff;
margin: 0 auto 20px;
padding: 0;
line-height: 1.5;
box-sizing: border-box;
}
.question-reveal-scroll .questionArea {
display: flex;
flex-direction: column;
}
.question-reveal-scroll .question__numBox {
width: 100%;
height: auto;
}
.question-reveal-scroll .question__numBox .numItems {
width: 100%;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
padding-left: 0;
}
.question-reveal-scroll .question__numBox .numItems .item {
font-size: 20px;
color: #fff;
background: #ccc;
width: 60px;
height: 60px;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 2em;
position: relative;
}
.question-reveal-scroll .question__numBox .numItems .item.current {
background: #EAA8BF;
}
.question-reveal-scroll .question__numBox .numItems .item:after {
content: ‘→’;
position: absolute;
top: 50%;
right: -2em;
color: #ccc;
font-size: 14px;
transform: translateY(-50%);
}
.question-reveal-scroll .question__numBox .numItems .item:last-of-type {
margin-right: 0;
}
.question-reveal-scroll .question__numBox .numItems .item:last-of-type:after {
content: none;
}
.question-reveal-scroll .title {
width: calc(100% – 10px);
color: #fff;
background-color: #EAA8BF;
font-size: 20px;
font-weight: 600;
margin: 0 auto 30px;
padding: 15px 5px;
display: flex;
flex-direction: column;
align-items: center;
}
.question-reveal-scroll .title .mark {
font-size: 34px;
margin-right: 15px;
color: #fff;
line-height: 1.1;
}
.question-reveal-scroll .questionImg,
.questionImg img {
width: 100%;
height: auto;
}
.question-reveal-scroll .linkbox {
width: 100%;
margin: 0 auto 40px;
padding: 0 15px;
text-align: left;
box-sizing: border-box;
}
.question-reveal-scroll input {
display: none;
}
.question-reveal-scroll input+label {
cursor: pointer;
border: none;
display: block;
}
.question-reveal-scroll input:not(:first-of-type)+label {
margin-top: 10px;
}
.question-reveal-scroll input+label .btn {
font-size: 14px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px 0 20px 50px;
font-weight: bold;
background-color: #eee;
line-height: 1.6;
position: relative;
display: block;
}
.question-reveal-scroll input:checked+label .btn {
background-color: #3498db;
color: #ffffff;
}
.question-reveal-scroll input+label .btn::before {
width: 14px;
height: 14px;
top: 50%;
left: 10px;
margin-top: -8px;
background: #f3f3f3;
border: 1px solid #ccc;
position: absolute;
content: ”;
transition: all 0.2s;
}
.question-reveal-scroll input[type=’radio’]+label .btn::before {
border-radius: 100%;
}
.question-reveal-scroll input+label .btn:focus {
outline: none !important;
}
.question-reveal-scroll input[type=’checkbox’]+label .btn:after {
top: 55%;
left: 13px;
width: 8px;
height: 4px;
margin-top: -8px;
border-left: 2px solid #3498db;
border-bottom: 2px solid #3498db;
transform: rotate(-45deg) scale(0.5);
position: absolute;
transition: all 0.2s;
content: ”;
opacity: 0;
}
.question-reveal-scroll input[type=’radio’]+label .btn:after {
top: 48%;
left: 13px;
width: 10px;
height: 10px;
margin-top: -4px;
background: #3498db;
transform: scale(2);
border-radius: 100%;
opacity: 0;
position: absolute;
content: ”;
transition: all 0.2s;
}
.question-reveal-scroll input[type=’checkbox’]:checked+label .btn:after {
opacity: 1;
transform: rotate(-45deg) scale(1);
}
.question-reveal-scroll input[type=’radio’]:checked+label .btn::after {
opacity: 1;
transform: scale(1);
}
.question-reveal-scroll ::-moz-focus-inner {
border-color: transparent;
}
.question-reveal-scroll .linkbox.btn-two {
text-align: center;
}
.question-reveal-scroll .linkbox.btn-two label {
width: 48%;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
.question-reveal-scroll .linkbox.btn-two .btn {
font-size: 34px;
color: #fff;
background: #3f3f3f;
padding: 10px;
text-align: center;
border: none;
border-radius: 10px;
box-shadow: 0 10px 0 #000;
transition: all 0.2s;
cursor: pointer;
}
.question-reveal-scroll .linkbox.btn-two input:checked+label .btn {
background: #bc0a1f;
box-shadow: 0 10px 0 #7d1521;
}
.question-reveal-scroll .linkbox.btn-two input+label .btn::before,
.question-reveal-scroll .linkbox.btn-two input+label .btn::after {
content: none;
}
.question-reveal-scroll .questionArea.not-checked .linkbox::after {
content: “回答してください”;
font-size: 14px;
color: #ff0000;
display: block;
text-align: right;
padding: 1em;
}
.revealarea {
font-size: 1.2rem;
text-align: left;
margin: 3rem auto 0;
padding: 0;
box-sizing: border-box;
}
.revealarea img {
max-width: 100%;
height: auto;
}
.is-hidden {
display: none;
}
.hidden-image {
display: none;
margin: 10px 0;
}
.hidden-image img {
margin: 0 auto;
}
.linkbox.btn-two.vertical {
display: grid;
width: 80%;
margin: 10px auto;
}
.linkbox.btn-two.vertical label {
display: block;
width: 100%;
}
@media screen and (min-width: 700px) {
.question-reveal-scroll .questionArea {
margin: 50px auto 80px;
max-width: 970px;
}
.question-reveal-scroll .title {
margin: 0 0 20px;
font-size: 24px;
}
.question-reveal-scroll .title .mark {
font-size: 28px;
}
.question-reveal-scroll input+label .btn {
font-size: 24px;
}
.question-reveal-scroll .linkbox {
margin: 70px auto 20px;
}
.question-reveal-scroll input+label .btn::before {
width: 28px;
height: 28px;
top: 41%;
}
.question-reveal-scroll input[type=’checkbox’]+label .btn::before {
top: 39%;
width: 30px;
height: 30px;
}
.question-reveal-scroll input[type=’checkbox’]+label .btn:after {
top: 51%;
left: 16px;
width: 16px;
height: 8px;
border-left-width: 4px;
border-bottom-width: 4px;
}
.question-reveal-scroll input[type=’radio’]+label .btn:after {
top: 43%;
left: 15px;
width: 20px;
height: 20px;
}
.question-reveal-scroll .linkbox.btn-two .btn {
font-size: 50px;
}
}
.step_arr {
position: relative;
padding-top: 22vw;
margin-top: -4vw;
}
.step_arr span {
position: absolute;
top: 0;
left: 50%;
width: 10vw;
height: 10vw;
margin-left: -5vw;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb 2s infinite;
animation: sdb 2s infinite;
opacity: 0;
box-sizing: border-box;
}
.step_arr span:nth-of-type(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.step_arr span:nth-of-type(2) {
top: 4vw;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.step_arr span:nth-of-type(3) {
top: 8vw;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@media screen and (min-width:700px) {
.step_arr {
position: relative;
padding-top: 136px;
margin-top: -25px;
}
.step_arr span {
width: 62px;
height: 62px;
margin-left: -31px;
}
.step_arr span:nth-of-type(2) {
top: 24.8px;
}
.step_arr span:nth-of-type(3) {
top: 49.6px;
}
}
@keyframes sdb {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
-
お待たせいたしました!
HTMLとCSSを下記コードに変更お願いします!
既存の記述をすべて消した上でペーストしてください!
———-【HTML】———-
<script>
var sbScrollRevealEnqueteWithRevealHiddenCase = sbScrollRevealEnqueteWithRevealHiddenCase || {};
(function(_) {
const classes = {
target: ‘.js-scroll-reveal-enquete-with-reveal’,
questionItem: ‘.questionArea’,
revealArea: ‘.js-reveal’,
}
const setting = {
duration: 600,
}
_.scrollTo = function(end, duration) {
const startTime = Date.now()
const easeOut = (p) => p * (2 – p)
const start = window.pageYOffset
const range = end – start
let position = 0
var move = function() {
const elapsedTime = Date.now() – startTime
const progress = elapsedTime / duration
position = start + range * easeOut(progress)
if (progress < 1) {
window.scrollTo(0, position)
requestAnimationFrame(move)
} else {
window.scrollTo(0, end)
return
}
}
requestAnimationFrame(move)
}
_.setEnquete = function(el) {
const revealArea = el.querySelector(classes.revealArea)
let linkBoxAll = Array.from(el.querySelectorAll(classes.questionItem))
el.addEventListener(‘change’, function(e) {
let checkedLength = 0;
let self = e.target
let current = self.closest(classes.questionItem)
let currentNo = Array.prototype.indexOf.call(linkBoxAll, current)
let next;
let scrollPoint = false;
let noScroll = current.classList.contains(“no-scroll”) ? true : false;
current.classList.remove(‘not-checked’);
const hiddenImages = current.querySelectorAll(‘.hidden-image’);
hiddenImages.forEach((img) => {
img.style.display = ‘none’;
if (img.dataset.sid == self.dataset.show) {
img.style.display = ‘block’;
noScroll = true;
}
});
linkBoxAll.forEach(function(linkBox) {
if (linkBox.querySelector(‘input:checked’)) checkedLength++;
})
if (checkedLength === linkBoxAll.length) {
revealArea.classList.remove(‘is-hidden’)
scrollPoint = revealArea.getBoundingClientRect().top + window.pageYOffset
} else if (linkBoxAll.length === currentNo + 1) {
let notChecked = linkBoxAll.filter(linkBox => !linkBox.querySelector(‘input:checked’));
notChecked.forEach(linkBox => linkBox.classList.add(‘not-checked’));
scrollPoint = notChecked[0].getBoundingClientRect().top + window.pageYOffset;
noScroll = false;
} else {
next = linkBoxAll[currentNo + 1]
if (next) scrollPoint = next.getBoundingClientRect().top + window.pageYOffset;
}
if (scrollPoint && !noScroll) {
_.scrollTo(scrollPoint, setting.duration)
}
})
}
_.init = function() {
Array.from(document.querySelectorAll(classes.target), el => {
_.setEnquete(el);
});
}
})(sbScrollRevealEnqueteWithRevealHiddenCase)
</script>
<script>
document.addEventListener(‘DOMContentLoaded’, sbScrollRevealEnqueteWithRevealHiddenCase.init, false);
</script>
<div class=”question-reveal-scroll js-scroll-reveal-enquete-with-reveal”>
<form name=”form-scroll-enquete”>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item current”>01</li>
<li class=”item”>02</li>
<li class=”item”>03</li>
<li class=”item”>04</li>
</ul>
</div>
<h2 class=”title”><span class=”mark”>Q1</span>今の体型を変えたいと思いますか?<br></h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249985/3e598dff-fb91-422f-9a1d-25973149ca8f.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249985/3e598dff-fb91-422f-9a1d-25973149ca8f.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox btn-two”><input id=”q1-1″ type=”radio” name=”q1″ data-show=”q1-1″><label for=”q1-1″>
<div class=”btn”>はい</div>
</label><input id=”q1-2″ type=”radio” name=”q1″ data-show=”q1-2″><label for=”q1-2″>
<div class=”btn”>いいえ</div>
</label></div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item”>01</li>
<li class=”item current”>02</li>
<li class=”item”>03</li>
<li class=”item”>04</li>
</ul>
</div>
<h2 class=”title”><span class=”mark”>Q2</span>一番気になる部位はどこですか?<br></h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249994/3c4798f0-dd3e-432b-b067-65ce5340a4e0.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3249994/3c4798f0-dd3e-432b-b067-65ce5340a4e0.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q2-1″ type=”radio” name=”q2″ data-show=”q2-1″><label for=”q2-1″>
<div class=”btn”>お腹周り</div>
</label><input id=”q2-2″ type=”radio” name=”q2″ data-show=”q2-2″><label for=”q2-2″>
<div class=”btn”>二の腕</div>
</label><input id=”q2-3″ type=”radio” name=”q2″ data-show=”q2-3″><label for=”q2-3″>
<div class=”btn”>足、太もも</div>
</label><input id=”q2-4″ type=”radio” name=”q2″ data-show=”q2-4″><label for=”q2-4″>
<div class=”btn”>顔まわり</div>
</label></div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item”>01</li>
<li class=”item”>02</li>
<li class=”item current”>03</li>
<li class=”item”>04</li>
</ul>
</div>
<h2 class=”title”><span class=”mark”>Q3</span>痩せることができたら何がしたいですか?<br></h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250021/17141f66-fa6e-48f4-abea-f5f56912e938.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250021/17141f66-fa6e-48f4-abea-f5f56912e938.jpg” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div>
<div class=”linkbox”><input id=”q3-1″ type=”radio” name=”q3″ data-show=”q3-1″><label for=”q3-1″>
<div class=”btn”>着たかった洋服を着て楽しみたい!</div>
</label><input id=”q3-2″ type=”radio” name=”q3″ data-show=”q3-2″><label for=”q3-2″>
<div class=”btn”>罪悪感なく美味しいものを食べたい!</div>
</label><input id=”q3-3″ type=”radio” name=”q3″ data-show=”q3-3″><label for=”q3-3″>
<div class=”btn”>周りの人から褒められたい!</div>
</label><input id=”q3-4″ type=”radio” name=”q3″ data-show=”q3-4″><label for=”q3-4″>
<div class=”btn”>好きな人にアプローチしたい!</div>
</label></div>
</div>
<div class=”questionArea js-form-radio”>
<div class=”question__numBox”>
<ul class=”numItems”>
<li class=”item”>01</li>
<li class=”item”>02</li>
<li class=”item”>03</li>
<li class=”item current”>04</li>
</ul>
</div>
<h2 class=”title”><span class=”mark”>Q4</span>理想の姿になれる医療痩身に興味はありますか?<br></h2>
<div class=”questionImg”>
<picture>
<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250029/9b57400a-2fdb-4e8b-9e21-31765a29572e.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3250029/9b57400a-2fdb-4e8b-9e21-31765a29572e.png” width=”735″ height=”490″ draggable=”false” class=”lazyload”>
</picture>
</div><a href=”#heading1″>
<div class=”linkbox btn-two”><input id=”q4-1″ type=”radio” name=”q4″ data-show=”q4-1″><label for=”q4-1″>
<div class=”btn”>はい</div>
</label><input id=”q4-2″ type=”radio” name=”q4″ data-show=”q4-2″><label for=”q4-2″>
<div class=”btn”>いいえ</div>
</label></div>
<div class=”step_arr”><span></span><span></span><span></span></div>
</a>
</div>
</form>
</div>
———-【CSS】———-
.question-reveal-scroll {
width: 970px;
max-width: 100%;
font-size: 16px;
background-color: #fff;
margin: 0 auto 20px;
padding: 0;
line-height: 1.5;
box-sizing: border-box;
}
.question-reveal-scroll .questionArea {
display: flex;
flex-direction: column;
}
.question-reveal-scroll .question__numBox {
width: 100%;
height: auto;
}
.question-reveal-scroll .question__numBox .numItems {
width: 100%;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
padding-left: 0;
}
.question-reveal-scroll .question__numBox .numItems .item {
font-size: 20px;
color: #fff;
background: #ccc;
width: 60px;
height: 60px;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 2em;
position: relative;
}
.question-reveal-scroll .question__numBox .numItems .item.current {
background: #EAA8BF;
}
.question-reveal-scroll .question__numBox .numItems .item:after {
content: ‘→’;
position: absolute;
top: 50%;
right: -2em;
color: #ccc;
font-size: 14px;
transform: translateY(-50%);
}
.question-reveal-scroll .question__numBox .numItems .item:last-of-type {
margin-right: 0;
}
.question-reveal-scroll .question__numBox .numItems .item:last-of-type:after {
content: none;
}
.question-reveal-scroll .title {
width: calc(100% – 10px);
color: #fff;
background-color: #EAA8BF;
font-size: 20px;
font-weight: 600;
margin: 0 auto 30px;
padding: 15px 5px;
display: flex;
flex-direction: column;
align-items: center;
}
.question-reveal-scroll .title .mark {
font-size: 34px;
margin-right: 15px;
color: #fff;
line-height: 1.1;
}
.question-reveal-scroll .questionImg,
.questionImg img {
width: 100%;
height: auto;
}
.question-reveal-scroll .linkbox {
width: 100%;
margin: 0 auto 40px;
padding: 0 15px;
text-align: left;
box-sizing: border-box;
}
.question-reveal-scroll input {
display: none;
}
.question-reveal-scroll input+label {
cursor: pointer;
border: none;
display: block;
}
.question-reveal-scroll input:not(:first-of-type)+label {
margin-top: 10px;
}
.question-reveal-scroll input+label .btn {
font-size: 14px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px 0 20px 50px;
font-weight: bold;
background-color: #eee;
line-height: 1.6;
position: relative;
display: block;
}
.question-reveal-scroll input:checked+label .btn {
background-color: #3498db;
color: #ffffff;
}
.question-reveal-scroll input+label .btn::before {
width: 14px;
height: 14px;
top: 50%;
left: 10px;
margin-top: -8px;
background: #f3f3f3;
border: 1px solid #ccc;
position: absolute;
content: ”;
transition: all 0.2s;
}
.question-reveal-scroll input[type=’radio’]+label .btn::before {
border-radius: 100%;
}
.question-reveal-scroll input+label .btn:focus {
outline: none !important;
}
.question-reveal-scroll input[type=’checkbox’]+label .btn:after {
top: 55%;
left: 13px;
width: 8px;
height: 4px;
margin-top: -8px;
border-left: 2px solid #3498db;
border-bottom: 2px solid #3498db;
transform: rotate(-45deg) scale(0.5);
position: absolute;
transition: all 0.2s;
content: ”;
opacity: 0;
}
.question-reveal-scroll input[type=’radio’]+label .btn:after {
top: 48%;
left: 13px;
width: 10px;
height: 10px;
margin-top: -4px;
background: #3498db;
transform: scale(2);
border-radius: 100%;
opacity: 0;
position: absolute;
content: ”;
transition: all 0.2s;
}
.question-reveal-scroll input[type=’checkbox’]:checked+label .btn:after {
opacity: 1;
transform: rotate(-45deg) scale(1);
}
.question-reveal-scroll input[type=’radio’]:checked+label .btn::after {
opacity: 1;
transform: scale(1);
}
.question-reveal-scroll ::-moz-focus-inner {
border-color: transparent;
}
.question-reveal-scroll .linkbox.btn-two {
text-align: center;
}
.question-reveal-scroll .linkbox.btn-two label {
width: 48%;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
.question-reveal-scroll .linkbox.btn-two .btn {
font-size: 34px;
color: #fff;
background: #3f3f3f;
padding: 10px;
text-align: center;
border: none;
border-radius: 10px;
box-shadow: 0 10px 0 #000;
transition: all 0.2s;
cursor: pointer;
}
.question-reveal-scroll .linkbox.btn-two input:checked+label .btn {
background: #bc0a1f;
box-shadow: 0 10px 0 #7d1521;
}
.question-reveal-scroll .linkbox.btn-two input+label .btn::before,
.question-reveal-scroll .linkbox.btn-two input+label .btn::after {
content: none;
}
.question-reveal-scroll .questionArea.not-checked .linkbox::after {
content: “回答してください”;
font-size: 14px;
color: #ff0000;
display: block;
text-align: right;
padding: 1em;
}
.revealarea {
font-size: 1.2rem;
text-align: left;
margin: 3rem auto 0;
padding: 0;
box-sizing: border-box;
}
.revealarea img {
max-width: 100%;
height: auto;
}
.is-hidden {
display: none;
}
.hidden-image {
display: none;
margin: 10px 0;
}
.hidden-image img {
margin: 0 auto;
}
.linkbox.btn-two.vertical {
display: grid;
width: 80%;
margin: 10px auto;
}
.linkbox.btn-two.vertical label {
display: block;
width: 100%;
}
@media screen and (min-width: 700px) {
.question-reveal-scroll .questionArea {
margin: 50px auto 80px;
max-width: 970px;
}
.question-reveal-scroll .title {
margin: 0 0 20px;
font-size: 24px;
}
.question-reveal-scroll .title .mark {
font-size: 28px;
}
.question-reveal-scroll input+label .btn {
font-size: 24px;
}
.question-reveal-scroll .linkbox {
margin: 70px auto 20px;
}
.question-reveal-scroll input+label .btn::before {
width: 28px;
height: 28px;
top: 41%;
}
.question-reveal-scroll input[type=’checkbox’]+label .btn::before {
top: 39%;
width: 30px;
height: 30px;
}
.question-reveal-scroll input[type=’checkbox’]+label .btn:after {
top: 51%;
left: 16px;
width: 16px;
height: 8px;
border-left-width: 4px;
border-bottom-width: 4px;
}
.question-reveal-scroll input[type=’radio’]+label .btn:after {
top: 43%;
left: 15px;
width: 20px;
height: 20px;
}
.question-reveal-scroll .linkbox.btn-two .btn {
font-size: 50px;
}
}
.step_arr {
position: relative;
padding-top: 22vw;
margin-top: -4vw;
}
.step_arr span {
position: absolute;
top: 0;
left: 50%;
width: 10vw;
height: 10vw;
margin-left: -5vw;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb 2s infinite;
animation: sdb 2s infinite;
opacity: 0;
box-sizing: border-box;
}
.step_arr span:nth-of-type(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.step_arr span:nth-of-type(2) {
top: 4vw;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.step_arr span:nth-of-type(3) {
top: 8vw;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@media screen and (min-width:700px) {
.step_arr {
position: relative;
padding-top: 136px;
margin-top: -25px;
}
.step_arr span {
width: 62px;
height: 62px;
margin-left: -31px;
}
.step_arr span:nth-of-type(2) {
top: 24.8px;
}
.step_arr span:nth-of-type(3) {
top: 49.6px;
}
}
@keyframes sdb {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
-
なぜかこちらに投稿すると文字化けが起こってしまう箇所があるため、貴社アカウントに移させていただきました!widgetをコピーして、お好きな箇所にペーストしてお使いください!
https://app.squadbeyond.com/ab_tests/o-ncYSyOsDKIMqUVw/articles
-