Basic quiz.index implementation done. TODO: options using {loop}

web/src/app/css/app.css

@@ -30,7 +30,8 @@ img.avatar {
 .avatar img {
 	background: #000;
 }
-.list .emoji {
+.list .emoji,
+.person .emoji {
 	width: 1.2em;
 	height: 1.2em;
 	vertical-align: middle;
@@ -135,12 +136,22 @@ main {
 	background: linear-gradient(30deg, #df00ff, pink, pink, #7c4cff);
 	box-shadow: -6px 4px 0px #0000004f;
 }
+#quizs .avatar.round.big,
+#quiz .avatar.round.big {
+	width: 5em !important;
+	height: 5em !important;
+}
 #quizs .avatar img,
 #quiz .avatar img {
 	width: 3em;
 	height: 3em;
 	filter: brightness(120%);
 }
+#quizs .avatar.big img,
+#quiz .avatar.big img {
+	width: 5em !important;
+	height: 5em !important;
+}
 #quizs .metadata .count {
 	float: right;
 	opacity: .5;

web/src/app/css/base.css

@@ -8,6 +8,8 @@ body {
 }
 
 .text-center { text-align: center }
+.text-left { text-align: left }
+.text-right { text-align: right }
 
 .flex { display: flex }
 .flex > .center { margin: auto }

web/src/app/js/app.js

@@ -424,7 +424,10 @@ function scriptPageHandler(modname, cfg) {
 app.preload = {
 	quiz: function() {
 		app.script('pages.quiz');
-		app.template.load('quiz.index');
+		app.template.loadMany([
+			'quiz.index',
+			'quiz.item',
+		]);
 	},
 }
 

web/src/app/js/pages/quiz.js

@@ -17,7 +17,7 @@ app.pages.quiz = {
 		container.innerHTML = '';
 
 		const onDataLoaded = async function(json) {
-			await app.template.loadMany(['quiz.index']);
+			await app.template.loadMany(['quiz.index', 'quiz.item']);
 			app.pages.quiz.data = json;
 			app.pages.quiz.paint(json);
 			if (getNormalizedURI() === app.vars.app_dir &&
@@ -31,8 +31,30 @@ app.pages.quiz = {
 	},
 	paint: function(json) {
 		json = json || app.pages.quiz.data;
+		if (json.from.props.age === undefined)
+			json.from.props.age = '??';
+		if (json.from.props.gender === undefined)
+			json.from.props.gender = 'unspecified';
+		if (json.from.props.place === undefined)
+			json.from.props.place = app.strings.app.the_fediverse;
 		const container = document.getElementById('app-container');
-		container.innerHTML = app.template.fill(json, app.template.get('quiz.index'));
-		console.log(json);
+		container.innerHTML = app.template.fill(json, app.template.get('quiz.index'),
+		function(k,v) {
+			if (k === 'from.name') return app.emoji.expand(capitalize(v));
+		});
+		const content = document.querySelector('#quiz #questions');
+		content.innerHTML = '';
+		for (var i in json.content) {
+			var item = json.content[i];
+			item.index = i;
+			item.number = parseInt(i)+1;
+			var tpl = app.template.fill(item, app.template.get('quiz.item'));
+			content.innerHTML += tpl;
+			if (item.options.length > 0) {
+				document.querySelector(`#quiz #question-${i} .type-freetext`).remove();
+			} else {
+				document.querySelector(`#quiz #question-${i} .type-options`).remove();
+			}
+		}
 	},
 }

web/src/app/js/templates/quiz/index.html

@@ -1,6 +1,35 @@
-<div id="quiz" class="panel center">
-	<h2 style="color:var(--clr_quiz); height: 4em">
+<div id="quiz" class="panel flex center item">
+<div class="content center">
+	<div class="person flex width-max">
+		<div class="width-max">
+			<span class="bigname">{.from.name}</span>
+			<br>
+			<span class="acct">@{.from.acct}</span>
+			<br><br>
+			<span>
+				<b>{.from.props.age}</b> {s:app.years_old},
+				<span style="opacity: .5">
+					<i class="fa fa-map-marker fa-fw">
+					</i>&nbsp;{.from.props.place}
+				</span>
+			</span>
+		</div>
+		<div>
+			<a href="#profile/{.from._id}">
+			<div class="big avatar round">
+				<img class="round" src="{.from.avatar.url}"/>
+			</div>
+			</a>
+		</div>
+	</div>
+	<br><hr><br>
+	<h2 style="color:var(--clr_quiz); padding :0;
+		margin-right: 1em"
+		class="text-center">
 		<i class="fa fa-quote-right fa-fw">
 		</i>FediLove Quiz
 	</h2>
+	<br>
+	<div id="questions"></div>
+</div>
 </div>

web/src/app/js/templates/quiz/item.html

@@ -0,0 +1,17 @@
+<div id="question-{.index}">
+	<table class="width-max"
+		style="margin-bottom: 1em">
+		<tbody><tr>
+			<td style="width: 2em"><b>{.number}</b></td>
+			<td>{.question}</td>
+		</tr></tbody>
+	</table>
+	<div class="type-freetext">
+		<input class="width-max" type="text"
+			name="question_{.index}"/>
+	</div>
+	<div class="type-options">
+		OPTIONS
+	</div>
+	<br><br>
+</div>