-
アンケートの作成を依頼したいです！
トピックス by
1792 pt
2023年12月13日 18:05
176
PV
【依頼内容】
動的なアンケートを作りたいです。
ーーー
①FVを設定する画像＋１問目の設問/画像/選択肢
→回答選択肢は「はい」「いいえ」のボタン形式
※回答したら②へ遷移
②2問目の設問/画像/選択肢
→回答選択肢は5個、複数選択可能なボタン形式
※回答したら③へ遷移
③3問目の設問/画像/選択肢
→回答選択肢は「はい」「いいえ」のボタン形式
※回答したら④へ遷移
④動画
→商品詳細を説明する動画を入れたい
※動画終了後④へ遷移
⑤4問目の設問/画像/選択肢
→回答選択肢は「はい」「いいえ」のボタン形式
※回答したら⑥へ遷移
⑥画像＋ボタン
ーーー
遷移する際も参考のようにアニメーションをつけて飽きないUXにできると理想的です
【参考ページ】
https://basefood.co.jp/lp/protein_cr_2/
-
1 コメント
-
Widget作成いたしました💫
—–
Widget名: 回答時に次の設問がアニメーション(動画は再生終了後) ※要Javascript
カテゴリ : アンケート
—–
■ 確認事項
[ 選択肢について ]
● 単一選択: ラジオボタン
<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