• widgetマスター

    モデレータ
    2024年1月26日 13:31

    お待たせいたしました!

    作成しましたが、既存修正になるので貴社アカウントに移させていただければと思います!

    widgetをコピーしていただければお好きなbeyondページに貼り付けられます!

    どのフォルダに移していいかご教授ください!

    また、診断中のローディング画像は弊社で作成したものを使用しておりますので、

    下記箇所の画像を入れ替えていただければと思います。

    
    
    <!-- ↓ 診断中のローディングここから ↓ -->
    <div class="auto-chats-loading shindan-loading">
        <div class="auto-chats-item">
            <!-- 診断中のローディング画像はお好みのものにご変更下さい -->
            <img src="<a target="_blank" class="c-link" data-stringify-link="https://file.mysquadbeyond.com/uploads/article_photo/photo/3496828/c21840cf-dbff-4079-921a-a5e23c54dfa6.gif" delay="150" data-sk="tooltip_parent" href="https://file.mysquadbeyond.com/uploads/article_photo/photo/3496828/c21840cf-dbff-4079-921a-a5e23c54dfa6.gif" rel="noopener noreferrer" style="box-sizing: inherit; color: inherit; text-decoration: none;">https://file.mysquadbeyond.com/uploads/article_photo/photo/3496828/c21840cf-dbff-4079-921a-a5e23c54dfa6.gif</a>" style="border-radius:50%;overflow: hidden;" height="169" width="169" draggable="false" class="lazyload">
        </div>
    </div>
    <!-- ↑ 診断中のローディング ここまで ↑ -->

    また、設問2の回答に応じた診断結果の出しわけについては、
    最終コンテンツを下記HTML構成にしております。
    こちらの構成に基づいて設置いて下さいませ。

    
    
    <!-- ↓ 診断結果コンテンツここから ↓ -->
    <div class="auto-chats-contents">
      <div class="auto-chats-item">
    
          <!-- 診断結果前にメッセージがある場合 いらなければ削除して下さい -->
          <div class="message">
              ...HTML省略...
          </div>
          <!-- ↑ 診断結果前にメッセージがある場合 ここまで ↑ -->
    
    
          <!-- ↓ 診断結果による各コンテンツの設定 ↓ -->
          <div class="shindan-results scroll-animation fadein-up">
    
              <!-- ↓ 回答がA2-1の場合 ↓ -->
              <div class="shindan-result result-1">
                  ...HTML省略...
              </div>
              <!-- ↑ 回答がA2-1の場合 ここまで ↑ -->
    
              <!-- ↓ 回答がA2-2の場合 ↓ -->
              <div class="shindan-result result-2">
                  ...HTML省略...
              </div>
              <!-- ↑ 回答がA2-2の場合 ここまで ↑ -->
    
              <!-- ↓ 回答がA2-3の場合 ↓ -->
              <div class="shindan-result result-3">
                  ...HTML省略...
              </div>
              <!-- ↑ 回答がA2-3の場合 ここまで ↑ -->
    
              <!-- ↓ 回答がA2-4の場合 ↓ -->
              <div class="shindan-result result-4">
                  ...HTML省略...
              </div>
              <!-- ↑ 回答がA2-4の場合 ここまで ↑ -->
    
          </div>
          <!-- ↑ 診断結果による各コンテンツの設定 ここまで ↑ -->
          
      </div>
    </div>
    <!-- ↑ 診断結果コンテンツここまで ↑-->

    また下記 JavaScript body にあったコードの方は、
    このたびの調整の兼ね合い上、コメントアウト(無効化)しております。

    
    
    <script>
    /* 以下コメントアウト
    //回答毎にメッセージ出し分け
    var inputBoxs = document.querySelectorAll(".choices-item [type='radio']");
    for (var i = inputBoxs.length - 1; i>=0; i--) {
        inputBoxs[i].addEventListener('change', function() {
            console.log(i);
    let inputName = this.name;
      var val = $(this).val();
    
      //アンケ1
      if(inputName=='q1'){    
        //回答したメッセを表示
        $('#q1-dashiwake').text(val);
      }
        });
    }
    //# sourceURL=test.js
    */
    </script>