【JavaScript】画像クリック必須の制御をする – MApps Help Desk

※ 標準機能ではないため動作保証外となっております。

貴社forSurvey環境での十分な動作確認をお願いいたします。

※ i-タイルのマトリクス設問では、次の設問に進めなくなるため利用しないでください。

※ アプリに遷移するURLのクリック必須の制御はご遠慮ください。

※ 回答負荷が高い制御になりますので、モニタプラスに配信する場合はクリック必須の多用はご遠慮ください。

本制御で利用する画像は「画像管理」からアップロードしてください。（画像を挿入する方法について）

◼️jQuery 3.7.1

――サンプル画面―――――――――――――――――――――――――――――――――――
画面遷移デモ　 https://test-bds.post-survey.com/preview/index.php?key=vOskUNJn&lang_c=ja
―――――――――――――――――――――――――――――――――――――――――――

① HTMLを「コメント上」へ入力する

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

② 画像提示用コードを「選択肢/設問文/コメント上中下」へ入力する

<a href='%%mydir%%xxx.png' data-fancybox="photo" data-type="image" class="url"><img src='%%mydir%%AAA.png'></a>

xxx.png ：ポップアップで表示する画像のファイル名
AAA.png ：クリックする表示画像のファイル名

※ クリック必須とする画像を複数表示する場合は、url1 を url2 , url3 ... と指定してください。

例）

<a href='%%mydir%%xxx.png' data-fancybox="photo" data-type="image" class="url1"><img src='%%mydir%%AAA.png'></a><br>
<a href='%%mydir%%xxx.png' data-fancybox="photo" data-type="image" class="url2"><img src='%%mydir%%AAA.png'></a>

③ Javascriptを「Javascript（次へボタン押下時）」へ入力する

url_check(event);
}
var url = [];
window.onload = function() {
  var links = document.querySelectorAll("a[class^='url']");
  links.forEach(function(link) {
    url[link.getAttribute("class")] = 0;
  });
  // 表示フラグOn
  links.forEach(function(link) {
    link.addEventListener('click', function() {
      url[this.getAttribute("class")] = 1;
    });
  });
}
$(document).ready(function() {
  $("[data-fancybox]").fancybox({
    loop : false,
    toolbar  : false,
    smallBtn : true,
    keyboard : false,
    arrows : false,
    iframe : {
      preload : false //iframeのプリロード
    },
    afterShow   : function(instance, current) {
      // 表示フラグOn（iPhoneでclickイベント発火しない機種の対応）
      const triggerElement = current.opts.$orig;
      if (triggerElement && triggerElement.length) {
        let className = triggerElement.attr('class');
        url[className] = 1;
      }
    },
  });
});
function url_check(event) {

  for (let key in url) {
    if (url[key] == 0) {
      alert("すべての画像をクリックしてください");
      return false;
    }
  }

◼️jQuery 1.4.1

――サンプル画面―――――――――――――――――――――――――――――――――――
画面遷移デモ　https://test-bds.post-survey.com/preview/index.php?key=1umdQwd5&lang_c=ja
―――――――――――――――――――――――――――――――――――――――――――