• コミュニティ

  アンケートWidgetで回答後に次の設問に動かしたい

  トピックス by widget初心者 1792 pt  2023年11月14日 19:40 299 PV

  【相談内容】

  記事LP上部のアンケート部分について、1問回答後に2問目の場所へ移動したいのですがうまく動かず、過不足をご教示いただきたいです！

  【Widget名】

  アンケート選択状態に対応したコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascript

  【相談したいページ】

  https://sb-preview.squadbeyond.com/articles/nhaOCTq_KxWzopsdzwMg/preview

  tomoko sasaki   1 年前 3 人 · 9 コメント

  • widget
  • アンケート選択状態に対応したコンテンツを表示（スクロール・最後の質問に回答すると下部表示）※要javascript
• 9 コメント

• 

  widgetマスター

  モデレータ

  2023年11月14日 19:47

  コードを確認したところ各設問の閉じタグ位置がズレています。

  下記の通り修正してください！

  ①</form>タグ手前の</div>を３つ削除する

  ②2つ目以降の<div class=”questionArea js-form-radio”>手前に</div>を１つ追加する

  ※自動スクロールさせたい設問からは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>
• 

  tomoko sasaki

  メンバー

  2023年11月20日 16:33

  いただいた内容で修正したのですが直らずでして

  どうすれば良いでしょうか？
  • 

    widgetマスター

    モデレータ

    2023年11月20日 16:37

    上記の通り修正いただければなおるかとおもうので、修正内容が間違っている可能性がありそうです・・・！

    修正したページのプレビューとWidget内のHTML, CSSを共有いただきたいです！

    よろしくお願いいたします！
  • 

    tomoko sasaki

    メンバー

    2023年11月20日 17:46

    以下でご確認いただけますと幸いです…！

    ◾️記事プレビュー

    https://sb-draft-preview.squadbeyond.com/articles/PqX_lRuJXbpdTcZaNbUA/draft?token=a3c036845f2a0cbc851c6a7df91f8ee7

    ◾️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;

    }

    }
  • 

    widgetマスター

    モデレータ

    2023年11月20日 17:47

    ありがとうございます！

    確認します💪
  • 

    widgetマスター

    モデレータ

    2023年11月21日 18:08

    お待たせいたしました！

    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;

    }

    }
  • 

    tomoko sasaki

    メンバー

    2023年11月21日 20:43

    上記で修正したのですが直りません…。

    JSがもともとあるウィジェットだったのですが

    そこら辺はどうしたら良いでしょうか？
  • 

    widgetマスター

    モデレータ

    2023年11月21日 21:07

    なぜかこちらに投稿すると文字化けが起こってしまう箇所があるため、貴社アカウントに移させていただきました！widgetをコピーして、お好きな箇所にペーストしてお使いください！

    https://app.squadbeyond.com/ab_tests/o-ncYSyOsDKIMqUVw/articles

    スクリーンショット-2023-11-21-21.06.41.png 97 KB 画像ファイル — クリックして 見る

    • コピーダウンロードリンク

    
  • 

    tomoko sasaki

    メンバー

    2023年11月22日 14:41

    直りました！！！！！！

    本当にありがとうございます！

Log In to Reply

• すべての人
• コミュニティメンバー
• 自分のみ

• すべての人
• コミュニティメンバー
• 自分のみ