17.0 RC2

- new gti questions
- allow download for projects
- gti options for shuffling
- styling fixes

Author: miermontoto

.eleventy.js

@@ -28,7 +28,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.setDataFileSuffixes([".data", ""]);
     eleventyConfig.setQuietMode(true);
     eleventyConfig.setServerOptions({
-        watch: ["_site/static/css/**"]
+        watch: ["src/static/css/**"]
     });
 
     eleventyConfig.addShortcode("addScript", function (filename) {
@@ -47,7 +47,7 @@ module.exports = function (eleventyConfig) {
             return `<link rel="stylesheet" href="${filepath.replace('src', '').replace('.sass', '.css')}">`;
         }
 
-        console.log(`JS file ${filename} not found in ./src/static/js`);
+        console.log(`CSS file ${filename} not found in ./src/static/css`);
         return '';
     });
 
@@ -91,6 +91,7 @@ module.exports = function (eleventyConfig) {
 
             template += `
                 </div>
+                ${shuffle == "false" ? '<i>* orden de respuestas fijado</i>' : ''}
             </div>
             `;
         });

package.json

@@ -152,7 +152,7 @@
 			"correct": 0
 		},
 		{
-			"title": "¿Qué palabra falta en la siguiente frase?: <i>\"La práctica Gestión del cambio organizacional trata de [?] la resistencia al cambio\"",
+			"title": "¿Qué palabra falta en la siguiente frase?: <quote>\"La práctica Gestión del cambio organizacional trata de [?] la resistencia al cambio\"</quote>",
 			"answers": [
 				"influenciar",
 				"mitigar",
@@ -192,15 +192,14 @@
 			"correct": 0
 		},
 		{
-			"title": "¿Qué tipo de aplicaciones gestiona la práctica \"Desarrollo y gestión de software\"?",
+			"title": "¿Cuáles son los tipos de eventos?",
 			"answers": [
-				"Las desarrolladas internamente",
-				"Las adquiridas",
-				"Los dos tipos anteriores",
-				"Otro tipo de aplicaciones"
+				"Informativo, Reactivo, Normal",
+				"Normal, Proactivo, Emergencia",
+				"Informativo, Advertencia, Excepción",
+				"Advertencia, Reactivo, Proactivo"
 			],
-			"correct": 2,
-			"shuffle": "false"
+			"correct": 2
 		},
 		{
 			"title": "¿Qué práctica es la responsable de supervisar los recursos tecnológicos virtuales y/o físicos, como servidores, almacenamiento, redes, hardware de cliente, middleware y software de los sistemas operacionales, que proporcionan los entornos necesarios para entregar servicios de TI?",
@@ -223,14 +222,62 @@
 			"correct": 2
 		},
 		{
-			"title": "¿Cuáles son los tipos de eventos?",
+			"title": "¿Qué tipo de aplicaciones gestiona la práctica \"Desarrollo y gestión de software\"?",
 			"answers": [
-				"Informativo, Reactivo, Normal",
-				"Normal, Proactivo, Emergencia",
-				"Informativo, Advertencia, Excepción",
-				"Advertencia, Reactivo, Proactivo"
+				"Las desarrolladas internamente",
+				"Las adquiridas",
+				"Los dos tipos anteriores",
+				"Otro tipo de aplicaciones"
+			],
+			"correct": 2,
+			"shuffle": "false"
+		},
+		{
+			"title": "¿Cuál NO es acción principal en la práctica gestión de riesgos?",
+			"answers": [
+				"Tratamiento",
+				"Evaluación",
+				"Eliminación",
+				"Identificación"
+			],
+			"correct": 2
+		},
+		{
+			"title": "¿Cuál de las siguientes tareas en el proceso de gestión financiera NO se suele llevar a cabo cuando los clientes son internos?",
+			"answers": [
+				"Facturar",
+				"Contabilizar",
+				"Presupuestar",
+				"Ninguna de los anteriores"
+			],
+			"correct": 0
+		},
+		{
+			"title": "El proceso de Gestión de la Seguridad de la Información debe sensibilizar e informar sobre la política de seguridad de la información. ¿Cuáles son las personas afectadas por esta actividad?",
+			"answers": [
+				"Los propietarios y gestores de procesos",
+				"Los directivos de la empresa, los directores de TI y el personal de gestión de la empresa",
+				"Todos los clientes, usuarios y personal de TI",
+				"Solo los actores del proceso de getsión de la seguridad de la información"
+			],
+			"correct": 2
+		},
+		{
+			"title": "¿Cuál asistiría en la identificación y resolución de incidencias y problemas asociados con el rendimiento de un servicio o componente?",
+			"answers": [
+				"Gestión de proveedores",
+				"Monitorización y gestión de eventos",
+				"Gestión de la capacidad y el rendimiento",
+				"Habilitación del cambio"
 			],
 			"correct": 2
 		}
+	],
+	"author": "Juan Mier",
+	"website": "https://mier.info/gti/",
+	"location": "https://mier.info/content/collections/projects/gti.data.json",
+	"contributors": [
+		"Juan Mier",
+		"Rubén Martínez"
 	]
 }

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

@@ -5,6 +5,7 @@ icons: [devicon-eleventy-plain, devicon-javascript-plain]
 permalink: /gti/
 demo: /gti/
 source: https://github.com/search?q=repo%3Amiermontoto%2Fmiermontoto+gti.&type=code
+download: /content/collections/projects/gti.data.json
 ---
 
 {% addStyle 'gti' %}
@@ -17,6 +18,13 @@ source: https://github.com/search?q=repo%3Amiermontoto%2Fmiermontoto+gti.&type=c
 	<noscript class=".error">ERROR: JavaScript is NEEDED for the quiz to work!</noscript>
 </div>
 <span class="button" id="reset">reset</span>
+<div id="options">
+	<input type="checkbox" id="shuffle-questions" checked>
+	<label for="shuffle">shuffle questions</label>
+	<br>
+	<input type="checkbox" id="shuffle-answers" checked>
+	<label for="shuffle">shuffle answers</label>
+</div>
 
 <hr>
 <div id="questions">

src/content/collections/projects/gti.njk

@@ -3,44 +3,34 @@
 .disabled.selected
 	background-color: base.$wrong
 
-
 .correct.selected
 	background-color: base.$correct
 
-
 .disabled
 	background-color: base.$light
 
-
 .disabled.correct:not(.selected)
 	background-color: base.$correct-background
 
-
 .question-block.correct
 	border-color: base.$correct-background
 
-
 .question-block.wrong
 	border-color: base.$wrong-background
 
-
 .disabled:hover
 	cursor: auto
 	animation: none
 
-
 #correct
 	font-size: 5em
 
-
 #total
 	font-size: 2.5em
 
-
 #top:hover
 	cursor: alias
 
-
 .question-block
 	margin: 0 auto
 	width: 90%
@@ -49,7 +39,6 @@
 	margin-bottom: 2em
 	padding: 2em
 
-
 #results
 	display: flex
 	flex-direction: row
@@ -68,15 +57,15 @@
 #scored
 	font-size: 2em
 
-
 #score
 	font-size: 1.5em
 
-
-.button
+.button.disabled
 	user-select: auto
 
-
 #→
 	margin-left: 1em
 	margin-right: 1em
+
+.letter
+	font-weight: bold

src/static/css/app/gti.sass

@@ -16,6 +16,9 @@ a, a:visited
     &:hover
         animation: base.$animation
 
+    &.button
+        color: base.$primary
+
 .animated
     animation: base.$animation
 
@@ -142,3 +145,8 @@ $rotation: 2.5rad
     color: base.$wrong
     font-weight: bold
     font-size: 2em
+
+quote
+    font-style: italic
+    color: base.$white
+    font-family: 'Times New Roman', Times, serif

src/static/css/global.sass

@@ -2,39 +2,35 @@ const isCorrect = (ans) => ans.classList.contains('correct') && ans.classList.co
 let responded = 0;
 let total;
 
+let originalQuestions;
+
 window.addEventListener('load', () => { // when the page loads (the content is rendered)
 	resetAll();
 	document.querySelector('#reset').addEventListener('click', resetAll);
 	total = document.querySelectorAll('.question-block').length;
 	document.querySelector('#total').innerHTML = total;
+	originalQuestions = document.querySelector('#questions').innerHTML;
 
-	// shuffle questions
-	let questions = document.querySelectorAll('.question-block');
-	let i = 1;
-	shuffle(questions).forEach((q) => {
-		document.querySelector('#questions').appendChild(q);
-		let title = q.querySelector('.question');
-		title.innerHTML = `${i++}. ${title.innerHTML}`; // add index to each question title
-	});
+	document.querySelectorAll('#shuffle-questions, #shuffle-answers').forEach((checkbox) => {
+		checkbox.addEventListener('change', () => {
+			document.querySelector('#questions').innerHTML = originalQuestions;
 
-	// shuffle 'shuffable' answer blocks
-	document.querySelectorAll('.answer-block').forEach((block) => {
-		let j = 0;
-		if (block.getAttribute('shuffle') !== 'false') {               // if it's shuffable
-			block.querySelectorAll('br').forEach((br) => br.remove()); // remove all <br> tags
-			let answers = block.querySelectorAll('.answer');           // get all answers
-			shuffle(answers).forEach((ans) => {                        // shuffle them and for each
-				block.appendChild(ans);                                // append them to the block
-				block.appendChild(document.createElement('br'));       // and add a <br> tag
-			});
-		}
+			if (document.querySelector('#shuffle-questions').checked) {
+				shuffleQuestions();
+			}
+
+			if (document.querySelector('#shuffle-answers').checked) {
+				shuffleAnswers();
+			}
 
-		block.querySelectorAll('.answer').forEach((ans) => {           // for each answer
-			let letter = String.fromCharCode(97 + j);                  // convert index to letter
-			ans.innerHTML = '<b>' + letter + '.</b> ' + ans.innerHTML; // add letter to answer
-			j++;
+			resetAll();
+			recalc();
 		});
 	});
+
+	shuffleQuestions();
+	shuffleAnswers();
+	recalc();
 });
 
 window.addEventListener('scroll', () => {
@@ -50,6 +46,43 @@ window.addEventListener('scroll', () => {
 	}
 });
 
+function recalc() {
+	let i = 1;
+	document.querySelectorAll('.question').forEach((q) => {
+		q.innerHTML = `<span class="number">${i++}.</span> ${q.innerHTML}`; 		  // add index to each question title
+	});
+
+	document.querySelectorAll('.answer-block').forEach((block) => {    				  // for each answer block
+		let j = 0;
+		block.querySelectorAll('.answer').forEach((ans) => {           				  // for each answer
+			let letter = String.fromCharCode(97 + j++);                               // convert index to letter
+			ans.innerHTML = `<span class="letter">${letter}.</span>${ans.innerHTML}`; // add letter to answer
+		});
+	});
+}
+
+// shuffle questions
+function shuffleQuestions() {
+	let questions = document.querySelectorAll('.question-block');
+	shuffle(questions).forEach((q) => {
+		document.querySelector('#questions').appendChild(q);
+	});
+}
+
+// shuffle 'shuffable' answer blocks
+function shuffleAnswers() {
+	document.querySelectorAll('.answer-block').forEach((block) => {
+		if (block.getAttribute('shuffle') !== 'false') {               // if it's shuffable
+			block.querySelectorAll('br').forEach((br) => br.remove()); // remove all <br> tags
+			let answers = block.querySelectorAll('.answer');           // get all answers
+			shuffle(answers).forEach((ans) => {                        // shuffle them and for each
+				block.appendChild(ans);                                // append them to the block
+				block.appendChild(document.createElement('br'));       // and add a <br> tag
+			});
+		}
+	});
+}
+
 function disableBlock(block) {
 	block.querySelectorAll('.answer').forEach((ans) => {
 		ans.removeEventListener('click', handleAnswerClick);

src/static/js/app/gti.js

@@ -9,6 +9,9 @@ css: project
     <a href="{{ source }}" id="source">source code ></a>
 {% endif %}
 <h1>{{ title }}</h1>
+{% if download %}
+    <a class="button" id="download" href="{{ download }}"><i class="fa-solid fa-download"></i>download</a>
+{% endif %}
 <hr>
 {% if content %}
     {{ content | safe }}