2022 Dynamic Scenarios In eLearning – eLearning Industry


Particular person Assignments For Every Learner

With all of the hype about AI picture technology lately, I assumed I might share a way I take advantage of for creating dynamic situations in eLearning. It depends neither on Synthetic Intelligence nor on machine studying, however somewhat on the idea of procedural technology.

“In computing, procedural technology is a technique of making knowledge algorithmically versus manually, sometimes by way of a mix of human-generated property and algorithms coupled with computer-generated randomness and processing energy.” [1]

This may occasionally sound difficult, however you will notice that, with only a few strains of code, you can present your learners with particular person assignments with out having to create them manually.

Dynamic situations are particularly helpful for higher-level cognitive processes resembling making use of or creating. Consider writing prompts to your language class, design prompts for college students of graphic design, or randomly generated objects for coaching the best way to add merchandise to an online store.

The next instance illustrates how simply you’ll be able to create your personal dynamic situations with only a few strains of code. The next code can be utilized inside, e.g., a Moodle textual content label exercise, however you need to be capable of apply it to any platform that means that you can enter customized HTML, CSS, and JavaScript.

The HTML Half: Construction And Static Content material

Let’s begin with the HTML half, the place the construction of the state of affairs is established. The textual content entered right here goes to seem inside all situations.

<p>Your pals <span id=”celebrantA”></span> and <span id=”celebrantB”></span> are getting married! As they know you might be an aspiring graphic desiger, they requested you to design their invites for you:</p>


<li>The ceremony takes place on <span id=”ceremonyDate”></span> at <span id=”ceremonyTime”></span><span id=”ceremonyTime”></span> in <span id=”place”></span>.


<li>The reception will happen at <span id=”receptionTime”></span>.


<li>Your pals need a chic invitation with <span id=”coloration”></span> being the dominant coloration.


<li>RSVPs ought to be despatched to <span id=”emailAddress”></span>



The markup is fairly easy: An introductory paragraph is adopted by an inventory of necessities. Observe the <span>-tags with their respective ids: they’re placeholders which can be randomly full of the info supplied within the JavaScript half beneath.

Don’t fret should you’re unfamiliar with HTML—it’s only a markup language which tells the browser the best way to interpret your content material. The tags like <p> for paragraph, <span> for a single phrase or a gaggle of phrases, and <ul> for unordered (bulleted) listing wrap across the content material. Simply ensure to “shut” every tag utilizing </p>, </span>, </ul>, and so on. A fast search on the primary steps of HTML will get you up and operating very quickly.

The JavaScript Half: The place The Magic Occurs

With a purpose to create dynamic situations, a complete lot of supply materials is required, from which the state of affairs is generated randomly. Within the code beneath, we offer lists of names, locations, colours, months, and so on., after which choose one for every state of affairs. In a ultimate step, the placeholders we arrange earlier than within the HTML half are populated utilizing this knowledge.

The feedback within the code offer you an concept of what is taking place in every line:


//present an inventory of names of the celebrants, wrapped in citation marks between []

let celebrants = [“Maria”, “Wei”, “Ahmed”, “Marie-Christine”, “Anna”, “Mary”, “Daniel”, “Joseph”, “Oksana”, “Serhey”, “Julien”, “Robin”];

//choose one title from the above listing for every celebrant

let celebrantAName = celebrants[Math.floor(Math.random() * celebrants.length)];

let celebrantBName = celebrants[Math.floor(Math.random() * celebrants.length)];

//populate the placeholders utilizing their ids: The empty span tags within the html half are full of the names of the celebrants

doc.getElementById(“celebrantA”).innerHTML = celebrantAName;

doc.getElementById(“celebrantB”).innerHTML = celebrantBName;

//present an inventory of months of the yr

let months = [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”];

//choose one

let ceremonyMonth = months[Math.floor(Math.random() * months.length)];

//set a random time for the ceremony between 2 and 5

let ceremonyTime = Math.flooring(Math.random() * (3) + 2);

//the reception takes place 2 hours later

let receptionTime = ceremonyTime + 2;

//select a quantity between 1 and 30

let ceremonyDay = Math.flooring(Math.random() * 30) + 1;

//concatenate month, day and yr with the required areas between them

let ceremonyDate = ceremonyMonth + ” ” + ceremonyDay + ” ” + “2022”;

//populate the placeholders utilizing their ids

doc.getElementById(“ceremonyDate”).innerHTML = ceremonyDate;

doc.getElementById(“ceremonyTime”).innerHTML = ceremonyTime + ” pm”;

doc.getElementById(“receptionTime”).innerHTML = receptionTime + ” pm”;

//present an inventory of locations

let locations = [“Franklin”, “Clinton”, “Madison”, “Arlington”, “Centerville”, “Georgetown”, “Springfield”, “Greenville”];

//choose one

let place = locations[Math.floor(Math.random() * places.length)];

//populate the placeholder utilizing its id

doc.getElementById(“place”).innerHTML = place;

//present an inventory of colours

let colours = [“Red”, “Blue”, “Green”, “Yellow”, “Purple”, “Brown”, “Orange”, “Pink” ];

//choose one

let selectedColor = colours[Math.floor(Math.random() * colors.length)];

//populate the placeholder utilizing its id

doc.getElementById(“coloration”).innerHTML = selectedColor;

//concatenate e-mail-address utilizing celebrants’ names

let emailAddress = celebrantAName.toLowerCase() + “-” + celebrantBName.toLowerCase() + “@marry.it”;

//populate the placeholder utilizing its id

doc.getElementById(“emailAddress”).innerHTML = emailAddress;


That is what one of many situations might appear to be. As they’re generated every time the web page is loaded, every of your learners is supplied with a customized state of affairs.

Each of your learners is provided with a custom scenario.

This easy instance could be expanded in keeping with your wants and creativeness: random pictures, supply supplies, protagonists, and so on., offer you numerous potentialities to your customized dynamic situations. Share your use instances with us!


[1] Procedural generation


Please enter your comment!
Please enter your name here

Share post:




More like this