Door Denise Koopmans
Javascript in elearning: Tekenlimiet bij een invulveld
Je kunt het zo gek niet bedenken of je kunt het bouwen in Storyline. Kruiswoordpuzzels, codewoorden… Deze interacties maken je E-learning leuker en maak je met een Text Entry veld. Maar, zoals je misschien wel hebt gemerkt (bijvoorbeeld tijdens onze workshop over hoe maak je een codewoord in E-learning op de Articulate gebruikersdagen 2019) kun je bij een Text Entry meerdere tekens in één vakje zetten. Dat is handig als je iemand een woord of zin wil laten intypen, maar in een vakje van een kruiswoordpuzzel of een codewoord wil je maar één letter kunnen toevoegen. Zoek niet verder, want we hebben de oplossing gevonden! Met een klein beetje javascript in je E-learning module kan je een tekenlimiet inbouwen in je project in Storyline.
Volg hiervoor de volgende stappen:
Stap 1: Open je Storyline-project en voeg een invulveld toe aan Storyline via [INSERT], [Input] en dan [Data Entry].
Stap 2: Open het variabelen-menu en klik in het menu op de Text Entry variabele.
Stap 3: Pas de naam van de variabele aan door op TextEntry te klikken en klik daarna op [OK].
Stap 4: Zet nu dezelfde naam in de placeholder.
Stap 5: Voeg daarna de trigger “Execute Javascript” toe door te klikken op [New Trigger] en daar “Execute Javascript” te kiezen.
Stap 6: Klik daarna op “Javascript” om de Javascript-code toe te voegen. Plak de Javascript-code (hieronder) in het vak en klik op [OK].
Javascript-code:
var fields = [“letter“];
(function setMaxChars(fields) {
fields.forEach(function (field, field_index) {
$(‘[placeholder=’ + field + ‘]’).attr(‘id’,field);
$(“#letter“).attr(“maxlength”,”1“);
$(‘[placeholder=’ + field + ‘]’).attr(‘placeholder’, ”);
});
})(fields);
Stap 7: Zet de trigger op “When the timeline starts on this slide” en klik op [OK].
Stap 8: Wil je meerdere text-entries toevoegen met tekenlimieten en misschien zelfs per Text Entry een ander limiet? Dat kan zo:
var fields = [“letter”, “letter2”, “letter3”];
(function setMaxChars(fields) {
fields.forEach(function (field, field_index) {
$(‘[placeholder=’ + field + ‘]’).attr(‘id’,field);
$(“#letter”).attr(“maxlength”,”20″);
$(“#letter2”).attr(“maxlength”,”12″);
$(“#letter3”).attr(“maxlength”,”15″);
$(‘[placeholder=’ + field + ‘]’).attr(‘placeholder’, ”);
});
})(fields);
De text-entry heeft nu een tekenlimiet! Let op, je kan het limiet alleen gepubliceerd testen en niet via preview.
Zo makkelijk voeg je dus een tekenlimiet toe aan je Text Entry! Succes!
