• コミュニティ

  アンケートwidgetのコンテンツ表示について

  トピックス by widget初心者 1792 pt  2023年8月22日 16:52 124 PV

  【widget名】

  アンケート（スクロール・ボタンを押すと下部表示・ピンクデザイン）※要javascript

  【やりたいこと】

  最後の「回答を完了する」ボタンを削除
  4問目の設問を応えたら、自動で下部コンテンツを表示させたい

  イメージ：https://t.gyazo.com/teams/squadbeyond/79b9208337b8a5f1949b25f00d30317f.png

  widgetマスター   9 月前 2 人 · 1 コメント

  • widget
  • アンケート
  • アンケート（スクロール・ボタンを押すと下部表示・ピンクデザイン）※要javascript
• 1 コメント

• 

  widgetマスター

  モデレータ

  2023年8月22日 19:07

  まずはCSSに下記コードを追加してください！

  .is-hide {
    display: none !important;
  }

  HTMLはclass名を変更します！

  【変更前】

  <div class="revealarea js-reveal is-hidden">
      完了ボタンを押すと表示される部分。...以下省略
  </div>

  【変更後】

  <div class="questionArea js-form-radio is-hide">
      完了ボタンを押すと表示される部分。...以下省略
  </div>

  JavaScript headはコードを適切な位置に追加してください！

  【変更前】

  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 + next.clientHeight / 2 - window.innerHeight / 2;
  
      _.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;
        }
      });
    });
  });

  【変更後】

  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;
      }
  
      //追加ここから
      if (next.classList.contains('is-hide')) {
        next.classList.remove('is-hide');
      }
      //追加ここまで
  
      let scrollPoint = next.getBoundingClientRect().top + window.pageYOffset + next.clientHeight / 2 - window.innerHeight / 2;
  
      _.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;
        }
      });
    });
  });

  上記を行ってもらえば、「ボタン」を削除してもQ4の選択肢を押すことで隠れている部分が表示できます！

  操作イメージ：https://t.gyazo.com/teams/squadbeyond/d5533d96275664d5def4f463e8d60031.mp4

Log In to Reply