Tekenlimiet in e-learning

Tekenlimiet bij een invulveld

Leestijd: 5 minuten

Door Denise Koopmans

Javascript in elearning: Tekenlimiet bij een invulveld

test 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!

 

Interessant? Vraag een gratis adviesgesprek aan

Spreekt dit blog je aan? Wij bespreken graag jouw e-learning wensen in een online adviesgesprek. Zo komen we samen tot de ideale leeroplossing.

Gerelateerde berichten

LMS leermanagementsysteem

Wat is een LMS?

4 min leestijd
voordelen online leren

De voordelen van online leren

4 min leestijd
gebruiksvriendelijke elearning

6 tips voor een gebruiksvriendelijke elearning

4 min leestijd
WP Feedback

Dive straight into the feedback!
Login below and you can start commenting using your own user instantly

Ja, ik wil graag een vrijblijvend adviesgesprek