Thursday, September 29, 2022
HomeE-LearningDynamic Situations In eLearning - eLearning Business

Dynamic Situations In eLearning – eLearning Business

Particular person Assignments For Every Learner

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

“In computing, procedural era is a technique of making information algorithmically versus manually, sometimes via a mixture of human-generated property and algorithms coupled with computer-generated randomness and processing energy.” [1]

This will likely sound sophisticated, however you will notice that, with only a few traces of code, you’ll present your learners with particular person assignments with out having to create them manually.

Dynamic eventualities 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 objects for coaching how you can add merchandise to an online store.

The next instance illustrates how simply you possibly can create your personal dynamic eventualities with only a few traces of code. The next code can be utilized inside, e.g., a Moodle textual content label exercise, however it is best to have the ability to apply it to any platform that lets you 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 eventualities.

<p>Your folks <span id=”celebrantA”></span> and <span id=”celebrantB”></span> are getting married! As they know you’re 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 folks need a sublime invitation with <span id=”colour”></span> being the dominant colour.


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



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

Don’t be concerned for those who’re unfamiliar with HTML—it’s only a markup language which tells the browser how you can 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) listing wrap across the content material. Simply be sure that to “shut” every tag utilizing </p>, </span>, </ul>, and many others. 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

In an effort to create dynamic eventualities, an entire lot of supply materials is required, from which the situation is generated randomly. Within the code under, we offer lists of names, locations, colours, months, and many others., after which decide one for every situation. In a ultimate 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 a listing 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 identify 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 a listing of months of the yr

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 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 a listing 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 a listing 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(“colour”).innerHTML = selectedColor;

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

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

//populate the placeholder utilizing its id

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


That is what one of many eventualities might appear like. 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 could be expanded in keeping with your wants and creativeness: random pictures, supply supplies, protagonists, and many others., offer you numerous potentialities on your customized dynamic eventualities. Share your use circumstances with us!


[1] Procedural era



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments