enhance(client): add quiz preset for play

1 files changed, 118 insertions, 0 deletions

diff --git a/packages/frontend/src/pages/flash/flash-edit.vue b/packages/frontend/src/pages/flash/flash-edit.vue
index f8435c48f8..2b7fcf74e1 100644
--- a/packages/frontend/src/pages/flash/flash-edit.vue
+++ b/packages/frontend/src/pages/flash/flash-edit.vue
@@ -173,6 +173,119 @@ var cursor = 0
 do()
 `;
 
+const PRESET_QUIZ = `/// @ 0.12.4
+let title = '地理クイズ'
+
+let qas = [{
+	q: 'オーストラリアの首都は？'
+	choices: ['シドニー' 'キャンベラ' 'メルボルン']
+	a: 'キャンベラ'
+	aDescription: '最大の都市はシドニーですが首都はキャンベラです。'
+} {
+	q: '国土面積2番目の国は？'
+	choices: ['カナダ' 'アメリカ' '中国']
+	a: 'カナダ'
+	aDescription: '大きい順にロシア、カナダ、アメリカ、中国です。'
+} {
+	q: '二重内陸国ではないのは？'
+	choices: ['リヒテンシュタイン' 'ウズベキスタン' 'レソト']
+	a: 'レソト'
+	aDescription: 'レソトは(一重)内陸国です。'
+} {
+	q: '閘門がない運河は？'
+	choices: ['キール運河' 'スエズ運河' 'パナマ運河']
+	a: 'スエズ運河'
+	aDescription: 'スエズ運河は高低差がないので閘門はありません。'
+}]
+
+let qaEls = [Ui:C:container({
+	align: 'center'
+	children: [
+		Ui:C:text({
+			size: 1.5
+			bold: true
+			text: title
+		})
+	]
+})]
+
+var qn = 0
+each (let qa, qas) {
+	qn += 1
+	qa.id = Util:uuid()
+	qaEls.push(Ui:C:container({
+		align: 'center'
+		bgColor: '#000'
+		fgColor: '#fff'
+		padding: 16
+		rounded: true
+		children: [
+			Ui:C:text({
+				text: \`Q{qn} {qa.q}\`
+			})
+			Ui:C:select({
+				items: qa.choices.map(@(c) {{ text: c, value: c }})
+				onChange: @(v) { qa.userAnswer = v }
+			})
+			Ui:C:container({
+				children: []
+			} \`{qa.id}:a\`)
+		]
+	} qa.id))
+}
+
+@finish() {
+	var score = 0
+
+	each (let qa, qas) {
+		let correct = qa.userAnswer == qa.a
+		if (correct) score += 1
+		let el = Ui:get(\`{qa.id}:a\`)
+		el.update({
+			children: [
+				Ui:C:text({
+					size: 1.2
+					bold: true
+					color: if (correct) '#f00' else '#00f'
+					text: if (correct) '🎉正解' else '不正解'
+				})
+				Ui:C:text({
+					text: qa.aDescription
+				})
+			]
+		})
+	}
+
+	let result = \`{title}の結果は{qas.len}問中{score}問正解でした。\`
+	Ui:get('footer').update({
+		children: [
+			Ui:C:postFormButton({
+				text: '結果を共有'
+				rounded: true
+				primary: true
+				form: {
+					text: \`{result}{Str:lf}{THIS_URL}\`
+				}
+			})
+		]
+	})
+}
+
+qaEls.push(Ui:C:container({
+	align: 'center'
+	children: [
+		Ui:C:button({
+			text: '答え合わせ'
+			primary: true
+			rounded: true
+			onClick: finish
+		})
+	]
+} 'footer'))
+
+Ui:render(qaEls)
+`;
+
 const PRESET_TIMELINE = `/// @ 0.12.4
 // APIリクエストを行いローカルタイムラインを表示するプリセット
 
@@ -259,6 +372,11 @@ function selectPreset(ev: MouseEvent) {
 			script = PRESET_SHUFFLE;
 		},
 	}, {
+		text: 'Quiz',
+		action: () => {
+			script = PRESET_QUIZ;
+		},
+	}, {
 		text: 'Timeline viewer',
 		action: () => {
 			script = PRESET_TIMELINE;