Allow multiple CYOAs from Appaloosa bluegill (#14)

* Forbid ?s fixes galaxyproject#4658 * Fixes galaxyproject#4664 * fix raw tag --------- Co-authored-by: Helena Rasche <[email protected]>
wee-snufkin · Jan 27, 2024 · 8230226 · 8230226
1 parent 5debf55
commit 8230226
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 31 deletions.
diff --git a/_includes/cyoa-choice-fr.html b/_includes/cyoa-choice-fr.html
@@ -7,24 +7,24 @@
 	</p>
 	{% endif %}
 	{% if include.option1 %}
-		<input id="cyoa-opt1" type="radio" name="cyoa" value="{{ include.option1 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option1 | slugify_unsafe }}')">
-		<label for="cyoa-opt1" class="select btn btn-secondary">{{ include.option1 }}</label>
+		<input id="cyoa-opt1{{ include.disambiguation }}" type="radio" name="cyoa" value="{{ include.option1 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option1 | slugify_unsafe }}', 'gtn-cyoa{{ include.disambiguation }}')">
+		<label for="cyoa-opt1{{ include.disambiguation }}" class="select btn btn-secondary">{{ include.option1 }}</label>
 	{% endif %}
 	{% if include.option2 %}
-		<input id="cyoa-opt2" type="radio" name="cyoa" value="{{ include.option2 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option2 | slugify_unsafe }}')">
-		<label for="cyoa-opt2" class="select btn btn-secondary">{{ include.option2 }}</label>
+		<input id="cyoa-opt2{{ include.disambiguation }}" type="radio" name="cyoa" value="{{ include.option2 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option2 | slugify_unsafe }}', 'gtn-cyoa{{ include.disambiguation }}')">
+		<label for="cyoa-opt2{{ include.disambiguation }}" class="select btn btn-secondary">{{ include.option2 }}</label>
 	{% endif %}
 	{% if include.option3 %}
-		<input id="cyoa-opt3" type="radio" name="cyoa" value="{{ include.option3 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option3 | slugify_unsafe }}')">
-		<label for="cyoa-opt3" class="select btn btn-secondary">{{ include.option3  }}</label>
+		<input id="cyoa-opt3{{ include.disambiguation }}" type="radio" name="cyoa" value="{{ include.option3 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option3 | slugify_unsafe }}', 'gtn-cyoa{{ include.disambiguation }}')">
+		<label for="cyoa-opt3{{ include.disambiguation }}" class="select btn btn-secondary">{{ include.option3  }}</label>
 	{% endif %}
 	{% if include.option4 %}
-		<input id="cyoa-opt4" type="radio" name="cyoa" value="{{ include.option4 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option4 | slugify_unsafe }}')">
-		<label for="cyoa-opt4" class="select btn btn-secondary">{{ include.option4 }}</label>
+		<input id="cyoa-opt4{{ include.disambiguation }}" type="radio" name="cyoa" value="{{ include.option4 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option4 | slugify_unsafe }}', 'gtn-cyoa{{ include.disambiguation }}')">
+		<label for="cyoa-opt4{{ include.disambiguation }}" class="select btn btn-secondary">{{ include.option4 }}</label>
 	{% endif %}
 
 	{% if include.default %}
-	<script type="text/javascript">
+	<script>
 		function ready(fn) {
 			if (document.readyState != 'loading'){
 				fn();
@@ -33,7 +33,7 @@
 			}
 		}
 		ready(function() {
-			cyoaDefault("{{ include.default | slugify_unsafe }}");
+			cyoaDefault("{{ include.default | slugify_unsafe }}", "gtn-cyoa{{ include.disambiguation }}");
 		})
 	</script>
 	{% endif %}

diff --git a/_includes/cyoa-choices.html b/_includes/cyoa-choices.html
@@ -1,4 +1,4 @@
-<blockquote class="notranslate hands_on gtn-cyoa" id="gtn-cyoa">
+<blockquote class="notranslate hands_on gtn-cyoa" id="gtn-cyoa{{ include.disambiguation }}">
 	<div class="box-title" aria-label="hands-on box: choose your own tutorial"><i class="fas fa-pencil-alt" aria-hidden="true"></i><span class="visually-hidden"></span> Hands-on: Choose Your Own Tutorial</div>
 	<p>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</p>
 	{% if include.text %}
@@ -7,20 +7,20 @@
 	</p>
 	{% endif %}
 	{% if include.option1 %}
-		<input id="cyoa-opt1" type="radio" name="cyoa" value="{{ include.option1 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option1 | slugify_unsafe }}')">
-		<label for="cyoa-opt1" class="select btn btn-secondary">{{ include.option1 }}</label>
+		<input id="cyoa-opt1{{ include.disambiguation }}" type="radio" name="cyoa{{ include.disambiguation }}" value="{{ include.option1 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option1 | slugify_unsafe }}', 'gtn-cyoa{{ include.disambiguation }}')">
+		<label for="cyoa-opt1{{ include.disambiguation }}" class="select btn btn-secondary">{{ include.option1 }}</label>
 	{% endif %}
 	{% if include.option2 %}
-		<input id="cyoa-opt2" type="radio" name="cyoa" value="{{ include.option2 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option2 | slugify_unsafe }}')">
-		<label for="cyoa-opt2" class="select btn btn-secondary">{{ include.option2 }}</label>
+		<input id="cyoa-opt2{{ include.disambiguation }}" type="radio" name="cyoa{{ include.disambiguation }}" value="{{ include.option2 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option2 | slugify_unsafe }}', 'gtn-cyoa{{ include.disambiguation }}')">
+		<label for="cyoa-opt2{{ include.disambiguation }}" class="select btn btn-secondary">{{ include.option2 }}</label>
 	{% endif %}
 	{% if include.option3 %}
-		<input id="cyoa-opt3" type="radio" name="cyoa" value="{{ include.option3 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option3 | slugify_unsafe }}')">
-		<label for="cyoa-opt3" class="select btn btn-secondary">{{ include.option3  }}</label>
+		<input id="cyoa-opt3{{ include.disambiguation }}" type="radio" name="cyoa{{ include.disambiguation }}" value="{{ include.option3 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option3 | slugify_unsafe }}', 'gtn-cyoa{{ include.disambiguation }}')">
+		<label for="cyoa-opt3{{ include.disambiguation }}" class="select btn btn-secondary">{{ include.option3  }}</label>
 	{% endif %}
 	{% if include.option4 %}
-		<input id="cyoa-opt4" type="radio" name="cyoa" value="{{ include.option4 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option4 | slugify_unsafe }}')">
-		<label for="cyoa-opt4" class="select btn btn-secondary">{{ include.option4 }}</label>
+		<input id="cyoa-opt4{{ include.disambiguation }}" type="radio" name="cyoa{{ include.disambiguation }}" value="{{ include.option4 | slugify_unsafe }}" onclick="cyoaChoice('{{ include.option4 | slugify_unsafe }}', 'gtn-cyoa{{ include.disambiguation }}')">
+		<label for="cyoa-opt4{{ include.disambiguation }}" class="select btn btn-secondary">{{ include.option4 }}</label>
 	{% endif %}
 
 	{% if include.default %}
@@ -33,7 +33,7 @@
 			}
 		}
 		ready(function() {
-			cyoaDefault("{{ include.default | slugify_unsafe }}");
+			cyoaDefault("{{ include.default | slugify_unsafe }}", "gtn-cyoa{{ include.disambiguation }}");
 		})
 	</script>
 	{% endif %}

diff --git 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
@@ -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
@@ -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 <span class="Ananas">🍍</span><span class="Avocados">🥑</span>.
 
+> <tip-title>Multiple, Disconnected CYOAs</tip-title>
+> 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
@@ -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 ?" %}
 
 <div class="Non" markdown="1">
 > 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.