Support template blocks in app.template, to be used in loops

web/src/app/js/app.js

@@ -47,7 +47,26 @@ app.template = {
 		});
 	},
 	fill: function(data, tpl, customCback) {
-		const _ = function() {
+		if (typeof data === 'string')
+			data = { value: data };
+		(function() {
+			const res = tpl.match(/\{loop([^\{\}]+)?\}[.\s\S]+?{\/loop\}/g);
+			if (res === null) return;
+			for (var i = 0; i < res.length; i++) {
+				const original = res[i];
+				var cnt = res[i].trim();
+				cnt = cnt.substr(cnt.indexOf('}')+1).trim();
+				cnt = cnt.substr(0, cnt.lastIndexOf('{')).trim();
+				var k = res[i].trim();
+				k = k.substr(1, k.indexOf('}')-1).trim();
+				if (customCback !== undefined) {
+					var newv = customCback(k, cnt);
+					if (typeof newv === 'string')
+						tpl = tpl.replace(original, newv);
+				}
+			}
+		})();
+		(function() {
 			const res = Array.from(tpl.matchAll(/\{(t|s):[^\{\}]+}/g));
 			var matches = [];
 			for (var i = 0; i < res.length; i++) {
@@ -69,7 +88,7 @@ app.template = {
 				if (k.startsWith('s:'))
 					tpl = tpl.replace('{'+k+'}', eval('app.strings.'+k.substr(2)));
 			}
-		}; _();
+		})();
 		const res = Array.from(tpl.matchAll(/\{\.[^\{\}]+\}/g));
 		var matches = [];
 		for (var i = 0; i < res.length; i++) {

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

@@ -42,13 +42,22 @@ app.pages.quiz = {
 		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'));
+			var tpl = app.template.fill(item, app.template.get('quiz.item'),
+			function(k,v) {
+				if (k === 'loop:options') {
+					var content = '';
+					for (var j in item.options)
+						content += app.template.fill(item.options[j], v);
+					return content;
+				}
+			});
 			content.innerHTML += tpl;
 			if (item.options.length > 0) {
 				document.querySelector(`#quiz #question-${i} .type-freetext`).remove();

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

@@ -11,7 +11,9 @@
 			name="question_{.index}"/>
 	</div>
 	<div class="type-options">
-		OPTIONS
+		{loop:options}
+		<div>{.value}</div>
+		{/loop}
 	</div>
 	<br><br>
 </div>