Dynamic Situations In eLearning – eLearning Trade

Particular person Assignments For Every Learner

With all of the hype about AI picture technology nowadays, I believed 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 relatively on the idea of procedural technology.

“In computing, procedural technology is a technique of making information 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 increasingly sound sophisticated, however you will notice that, with only a few strains of code, you’ll present your learners with particular person assignments with out having to create them manually.

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

The next instance illustrates how simply you may create your individual 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 it’s best to be capable to 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 situation is established. The textual content entered right here goes to look inside all situations.

<p>Your mates <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 mates need a chic invitation with <span id=”coloration”></span> being the dominant coloration.


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



The markup is fairly simple: An introductory paragraph is adopted by an inventory of necessities. Observe the <span>-tags with their respective ids: they’re placeholders which will likely be randomly stuffed with the information offered within the JavaScript half beneath.

Don’t be concerned in case you’re unfamiliar with HTML—it’s only a markup language which tells the browser the right way to interpret your content material. The tags like <p> for paragraph, <span> for a single phrase or a bunch of phrases, and <ul> for unordered (bulleted) record 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 working very quickly.

The JavaScript Half: The place The Magic Occurs

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

The feedback within the code offer you an thought of what is occurring 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”];

//decide one title from the above record 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 stuffed with the names of the celebrants

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

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

//present an inventory of months of the 12 months

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

//decide 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 12 months with the mandatory 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”];

//decide 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” ];

//decide 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 situation.

Each of your learners is provided with a custom scenario.

This straightforward instance may be expanded based on your wants and creativeness: random pictures, supply supplies, protagonists, and so on., offer you numerous prospects on your customized dynamic situations. Share your use circumstances with us!


[1] Procedural technology

Related Articles

Latest Articles