18.1

- "fix" autoplay on safari
- allow options in gti quiz
- add new GTI questions

Author: miermontoto

.eleventy.js

@@ -79,6 +79,18 @@ module.exports = function (eleventyConfig) {
                 </h2>
             `;
 
+            if (q.options) {
+                template += `<div class="options">`;
+
+                q.options.forEach((o, j) => {
+                    template += `
+                        <h3 class="option">${j+1}. ${o}</h3>
+                    `;
+                });
+
+                template += `</div>`;
+            }
+
             let shuffle = q.shuffle || true;
 
             template += `<div class="answer-block" shuffle="${shuffle}">`;

package.json

@@ -63,11 +63,16 @@
 		},
 		{
 			"title": "¿Cuáles son enfoques habituales en la entrega de proyectos?",
+			"options": [
+				"Traditional",
+				"Agile",
+				"Waterfall"
+			],
 			"answers": [
-				"Traditional y Agile",
-				"Traditional y Waterfall",
-				"Agile y Waterfall",
-				"Traditional, Waterfall y Agile"
+				"1 y 2",
+				"1 y 3",
+				"2 y 3",
+				"Todas"
 			],
 			"correct": 2
 		},
@@ -311,6 +316,51 @@
 				"Gestión de Niveles de Servicio"
 			],
 			"correct": 1
+		},
+		{
+			"title": "¿Qué práctica tiene como propósito mantener y mejorar el uso eficaz, eficiente y conveniente de la información y el conocimiento a lo largo de la organización?",
+			"answers": [
+				"Mejora continua",
+				"Medición e Informes",
+				"Gestión de la información",
+				"Gestión del conocimiento"
+			],
+			"correct": 3
+		},
+		{
+			"title": "¿Cuáles de los siguientes roles son responsables de la identificación de oportunidades de mejora?",
+			"options": [
+				"Propietario del servicio",
+				"Gestor de Mejora Continua",
+				"Propietarios de Procesos"
+			],
+			"answers": [
+				"1 y 2",
+				"1 y 3",
+				"2 y 3",
+				"Todos"
+			],
+			"correct": 3
+		},
+		{
+			"title": "¿En qué se deben basar todas las decisiones de mejora continua?",
+			"answers": [
+				"Información sobre cómo se miden los servicios",
+				"Datos analizados de manera precisa y cuidadosa",
+				"Un cuadro de mando integral actualizado",
+				"Una evaluación de madurez reciente"
+			],
+			"correct": 1
+		},
+		{
+			"title": "El porcentaje de gastos de TI que excede el presupuesto es:",
+			"answers": [
+				"No es posible exceder el prespuesto en ITIL",
+				"Un KPI",
+				"Un CSF",
+				"Una métrica"
+			],
+			"correct": 1
 		}
 	],
 	"author": "Juan Mier",

src/content/collections/projects/gti.data.json

@@ -4,7 +4,7 @@ css: index
 js: index
 ---
 
-<video id="background" autoplay loop muted></video>
+<video id="background" autoplay loop muted playsinline></video>
 <div id="overlay">
     <span id="fullscreen-background" class="button light">⛶</span>
     <span id="stop-background" class="button light">⨯</span>

src/index.njk

@@ -14,20 +14,7 @@ window.addEventListener('load', () => { // when the page loads (the content is r
 		checkbox.addEventListener('change', resetAll);
 	});
 
-	resetAll();
-});
-
-window.addEventListener('scroll', () => {
-	let element = document.getElementById('results');
-	let stickyPos = element.getBoundingClientRect().top + window.scrollY;
-
-	if (window.pageY >= stickyPos) {
-		element.style.position = 'fixed';
-		element.style.top = '0';
-	} else {
-		element.style.position = 'relative';
-		element.style.top = 'initial';
-	}
+	resetAll(false);
 });
 
 function recalc() {
@@ -103,7 +90,10 @@ function round(number) {
 	return rounded;
 }
 
-function resetAll() {
+function resetAll(alert = true) {
+	if (alert && responded != 0 && !window.confirm('esta acción reinicia el progreso del quiz. pulsa OK para continuar.')) {
+		return;
+	}
 	document.getElementById('questions').innerHTML = originalQuestions;
 
 	if (document.getElementById('shuffle-questions').checked) {

src/static/js/app/gti.js

@@ -15,7 +15,15 @@ fetch('index.data.json').then(response => response.json()).then(data => {
     source.src = `/assets/media/${randomize(data.videos)}`;
     source.type = 'video/mp4';
     videoElement.appendChild(source);
-    videoElement.play();
+    let promise = videoElement.play();
+
+    if (promise !== undefined) {
+        promise.catch(error => { // autoplay prevented (safari?)
+            console.log('autoplay was prevented by user or browser settings');
+            console.log('use a proper browser (firefox)');
+            console.log('autoplay can be resumed by clicking the fullscreen button in the bottom-left corner');
+        });
+    }
 });
 
 const sections = [