Widget作成いたしました💫

—–

Widget名: 回答時に次の設問がアニメーション(動画は再生終了後) ※要Javascript

カテゴリ : アンケート

設置例: https://sb-draft-preview.squadbeyond.com/articles/vHlsExmvllKPCtgBL_w/draft?token=7998ab88f7ddc8ba7691bfa46218a136

—–

■ 確認事項

[ 選択肢について ]

● 単一選択: ラジオボタン

<input type="radio" >

● 複数選択: チェックボックス

<input type="checkbox" >

複数選択にした場合は選択後に次へとすすむボタンを下記の構成で設置して下さい。

<div class="answer">
    <ul class="answer-list">
      ... 複数選択肢の内容
    </ul>
</div>
<div class="view-change-next">次へのボタン</div>

[ 戻るボタンについて ]

ユーザービリティのために前の設問に戻れるように下記HTMLにて設置しております。

不用な場合は下記HTMLを削除してください。

<div class="view-change-back">もどる</div>

[ 動画コンテンツについて ]

下記HTML内に動画を設置することで、動画を自動再生し再生が終わったら次への設問に自動で遷移します。

自動遷移する仕様上、設問としてはカウントされません。

また ユーザービリティ向上のため動画の再生時間をカウントダウン表示します。

不要な場合は下記 <div class=”video-time”></div> を削除してください。

<div class="view-change-item video-item">
  <!-- ...省略 -->
  <video controlslist="controlslist" muted="muted" playsinline=""> 
    <source src="[ここに動画のURL].mp4" type="video/mp4">
  </video>
  <div class="video-time"></div>
  <!-- ...省略 -->
</div>

[ videoタグについて ]

● 下記属性はスマホ再生に必要です

・playsinline

・muted

● 下記属性はjavascript側で操作しますので仕様上付与しないで下さい

・autoplay

・loop