diff --git a/_includes/cyoa-choice-fr.html b/_includes/cyoa-choice-fr.html index a73705dc82892a..a7cf64de997b2e 100644 --- a/_includes/cyoa-choice-fr.html +++ b/_includes/cyoa-choice-fr.html @@ -7,24 +7,24 @@

{% endif %} {% if include.option1 %} - - + + {% endif %} {% if include.option2 %} - - + + {% endif %} {% if include.option3 %} - - + + {% endif %} {% if include.option4 %} - - + + {% endif %} {% if include.default %} - {% endif %} diff --git a/_includes/cyoa-choices.html b/_includes/cyoa-choices.html index 0a8d7fb8eb7343..c0a836e10b4de5 100644 --- a/_includes/cyoa-choices.html +++ b/_includes/cyoa-choices.html @@ -1,4 +1,4 @@ -
+
Hands-on: Choose Your Own Tutorial

This is a "Choose Your Own Tutorial" section, where you can select between multiple paths. Click one of the buttons below to select how you want to follow the tutorial

{% if include.text %} @@ -7,20 +7,20 @@

{% endif %} {% if include.option1 %} - - + + {% endif %} {% if include.option2 %} - - + + {% endif %} {% if include.option3 %} - - + + {% endif %} {% if include.option4 %} - - + + {% endif %} {% if include.default %} @@ -33,7 +33,7 @@ } } ready(function() { - cyoaDefault("{{ include.default | slugify_unsafe }}"); + cyoaDefault("{{ include.default | slugify_unsafe }}", "gtn-cyoa{{ include.disambiguation }}"); }) {% endif %} diff --git a/assets/js/main.js b/assets/js/main.js index b0de75db847c7f..ce4108dc561555 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -57,16 +57,16 @@ $("section#tutorial-content .hands_on,section#tutorial-content .hands-on").each( }) // CYOA Support -function cyoaChoice(text){ +function cyoaChoice(text, cyoaId){ if(text !== undefined && text !== null){ var loc = new URL(document.location) try { - localStorage.setItem(`gtn-cyoa-${loc.pathname}`, text); + localStorage.setItem(`${cyoaId}-${loc.pathname}`, text); } catch(e) { // Helaas pindakaas } - var inputs = document.querySelectorAll(".gtn-cyoa input"), + var inputs = document.querySelectorAll(`#${cyoaId} input`), options = [...inputs].map(x => x.value), nonMatchingOptions = options.filter(x => x !== text); @@ -85,36 +85,36 @@ function cyoaChoice(text){ } } -function cyoaDefault(defaultOption){ +function cyoaDefault(defaultOption, cyoaId){ // Start with the URL parameter var loc = new URL(document.location) - var urlOption = loc.searchParams.get("gtn-cyoa"); + var urlOption = loc.searchParams.get(cyoaId); if(urlOption){ - cyoaChoice(urlOption); + cyoaChoice(urlOption, cyoaId); return; } // Otherwise fall back to local storage (survives refreshes) var lsOption; try { - lsOption = localStorage.getItem(`gtn-cyoa-${loc.pathname}`); + lsOption = localStorage.getItem(`${cyoaId}-${loc.pathname}`); } catch(e) { // Helaas pindakaas } if(lsOption !== null && lsOption !== undefined){ - cyoaChoice(lsOption); + cyoaChoice(lsOption, cyoaId); return; } // Otherwise if the browser is remembering for us, use that. var currentlySelected = [...document.querySelectorAll("input[name='cyoa']")].filter(x => x.checked)[0]; if(currentlySelected){ - cyoaChoice(currentlySelected); + cyoaChoice(currentlySelected, cyoaId); return; } // And failing that, use the default. - cyoaChoice(defaultOption); + cyoaChoice(defaultOption, cyoaId); } (function (window, document) { diff --git a/bin/lint.rb b/bin/lint.rb index 2e618a270c4b3a..0445cef9f9f840 100755 --- a/bin/lint.rb +++ b/bin/lint.rb @@ -1015,6 +1015,12 @@ def self.fix_file(path) code: 'GTN:014')]) end + if path.match(/\?/) + emit_results([ReviewDogEmitter.file_error(path: path, + message: 'There ?s in this filename, that is forbidden.', + code: 'GTN:014')]) + end + case path when /md$/ handle = File.open(path, 'r') diff --git a/topics/contributing/tutorials/create-new-tutorial-content/tutorial.md b/topics/contributing/tutorials/create-new-tutorial-content/tutorial.md index 8f012f3c66156d..de4b5ce1ea948a 100644 --- a/topics/contributing/tutorials/create-new-tutorial-content/tutorial.md +++ b/topics/contributing/tutorials/create-new-tutorial-content/tutorial.md @@ -1195,6 +1195,25 @@ And then they can wrap the relevant sections with a `div` block with the relevan This can also be used inline: My favourite fruit is an đŸđŸ„‘. +> Multiple, Disconnected CYOAs +> If you wish to have multiple CYOAs in a single tutorial, you are free to do that! However you must: +> +> 1. Ensure that all options are disjoint, there should not be any shared terms! (I.e if the both CYOAs need to use "STAR", please find a different way to phrase it, or even use "STAR ", it just needs to be different.) +> 2. Provide a disambiguation term for them, passed as a parameter to all, or all but one, includes. +> +> This disambiguation term will affect the URL parameter, which will become `?gtn-cyoa{term}={value}` +> +> E.g.: +> +> ``` +> {% raw %} +> {% include _includes/cyoa-choices.html option1="Oui" option2="Non" default="Oui" text="Vos donnĂ©es ESTAMP sont prĂȘtes ?" %} +> {% include _includes/cyoa-choices.html option1="Yes" option2="No" text="Do the thing?" disambiguation="english" %} +> {% endraw %} +> ``` +{: .tip} + + ### URL Parameter The branch can be selected via URL parameter e.g. for courses, to prevent users selecting the wrong path. Just supply `?gtn-cyoa=Ananas` (or your preferred value) on the tutorial URL. diff --git a/topics/ecology/tutorials/champs-blocs/tutorial_FR.md b/topics/ecology/tutorials/champs-blocs/tutorial_FR.md index 847e729b8c6d5b..eb4e032ecb4046 100644 --- a/topics/ecology/tutorials/champs-blocs/tutorial_FR.md +++ b/topics/ecology/tutorials/champs-blocs/tutorial_FR.md @@ -73,7 +73,7 @@ Concentrons-nous maintenant sur notre workflows d'analyse sur l'Ă©tat Ă©cologiqu # Centraliser les donnĂ©es -{% include _includes/cyoa-choices.html option1="Oui" option2="Non" default="Oui" text="Vos donnĂ©es ESTAMP sont prĂȘtes ?" %} +{% include _includes/cyoa-choice-fr.html option1="Oui" option2="Non" default="Oui" text="Vos donnĂ©es ESTAMP sont prĂȘtes ?" %}
> 1. Télécharger les données depuis la base ESTAMP [estamp.afbiodiversite.fr](https://estamp.afbiodiversite.fr/) puis rendez-vous dans l'espace "accédez aux données" en bas à droite de la page. AprÚs aplication des critÚres de filtre, vous obtenez une archive zip.