AI powered learning in eLearning modules

Last updated: Jan 2024

Table of Contents

   Overview

Welcome to the world of AI-powered learning in eLearning modules! This user guide will show you how to incorporate AI into your e-learning content using Artha’s AIReady plugin.

Create intelligent characters, engage learners in dynamic conversations, and deliver personalized learning experiences. With an AIReady subscription, this guide can equip you with the knowledge and techniques needed to bring your learning to life in ways you’ve only imagined.

Who is this guide for

Built for eLearning Designers & Developers who have an active subscription to Artha’s AIReady plugin, we’ll walk you through the steps of integrating AI into your eLearning courses.

Note: While we’ve tailored the example code specifically for Storyline 360, the code and steps can be used in any other authoring tool that has JavaScript functionality. 

 

AIReady Key

The code works only with Artha Learning’s API key that is unique to you. You are provided the API key in an email post subscription. You will need to replace the AIReady key in the code here to make it work. 

 

AIReady Docs Add-on

AIReady Docs add-on enables you to have AI work specifically with your documents as its context. One you have sent your text-only documents to aiready@arthalearning.com, we will generate unique document id(s) for you. Use this document id within newline characters “ \n” as part of any query to enable the document context.

AIReady Code

This is your AIReady JavaScript code to use in Storyline 360 projects. We will explore how to use this in detail in subsequent sections. 

				
					var player = GetPlayer();

var userPrompt = player.GetVar('TextEntry');

//This is the AI Prompt. Change it as needed. Ensure to keep the whole prompt in a single line. no matter how long. 
AIPrompt = "This is what user is asking: " + userPrompt + " Answer this question in 3 sentences:";

// Make the API call to Artha's GPT API. You won't need to make changes to the below code except to rename the GPT response variable if necessary.
AIReadyKey='REPLACE THIS WITH YOUR AIREADY KEY';

fetch(AIReadyKey, {
    method: 'POST',
    body: JSON.stringify(AIPrompt),
    headers: {
        "Content-Type": "application/json",
    },
})
 .then(response => {
    if (!response.ok) {
      // Create an error and include both the status code and the response text
      return response.text().then(body => {
        throw new Error(`HTTP status code: ${response.status}, Body: ${body}`);
      });
    }
    return response.json();
  })
  .then(data => {
        data = JSON.parse(data.body);
        player.SetVar('GPT_Response', data);
    })
    .catch(error => {
        console.error('Error fetching GPT response:', error.message);
        // Provide a standard error response
        const gptResponse = "We can't analyse your answer right now. Please try again later. In the meantime, you could review and reflect on your course content.";
        // Set a variable in Articulate Storyline to store the response
        player.SetVar('GPT_Response', gptResponse);
    });


				
			

AIReady Docs Add-on code

To use your specific document as a context source, replace the AIPrompt line to:

				
					AIPrompt = " \n <document> Your document ID </document> \n " + " This is what user is asking: " + userPrompt + " Answer this question in 3 sentences:";
				
			

Getting Started

There are many applications of AI Integration. We will start with a simple, default example, and then show more complex use cases.

Big Idea:

This API works quite similarly to the usual AI Chatbot. You ask it a question, and it provides an answer. To integrate it within an eLearning, we need to 1) Gather user input 2) Create a prompt to send to AI, and 3) Receive AI’s answer back in a variable.

Use Case : Answering an open-text learner question using ChatGPT.

In a new slide, create a text data entry field for the learners to type their question.

Picture2

Step 1 – Create a text variable to pass the prompt to ChatGPT.

This creates an automatic trigger and a variable called TextEntry.

Picture3

We will pass this variable to ChatGPT via a JavaScript trigger. If the name of the input variable is different from TextEntry (such as TextEntry1), you will need to update your AIReady Code as shown highlighted in the figure below.

Picture12

Note: The TextEntry variable is then stored in JavaScript as “userPrompt” and used as part of the AI prompt.

Step 2 – Create a text variable to receive the ChatGPT response.

Let’s call it GPT_Response. This is the variable that will store the response back from AI. It will be a text variable. It is recommended to give it a placeholder value, so it displays that while waiting for AI to answer.

Picture5

Note that if you change this variable’s name, you will also need to change it in the JavaScript code as shown.

Picture13

Step 3 – Create a button to call ChatGPT.

Create a button and set a trigger to Execute JavaScript when the user clicks that button. This will send the learner’s question to ChatGPT.

Picture7

Step 4 – Copy the below JavaScript code into the Editor.

Open the JavaScript Editor by selecting the JavaScript button on the trigger.

In the JavaScript window, copy-paste your AIReady code. Remember to make sure your input variable (TextEntry) and output variable (GPT_Response) are same as in your Storyline file.

Picture8

 

Step 5 – Update the prompt.

Depending on what you’re using the AI for, you’ll want to tweak the AI prompt that gets sent to ChatGPT. The prompt will significantly impact the quality of response from AI. For inspiration, check out the various use cases described in this guide.

For the simple use case of answering a question, our prompt could be the default:

AIPrompt = This is what the user is asking: “ + userPrompt + ” Answer this question in 3 sentences:”;

 

Note: AIPrompt is usually different from the user input. As learning designers, this is your opportunity to provide context and instructions to the AI. For example, in the prompt above, we pass on the user input (marked as “userPrompt” in the code). In addition, we also tell AI that this is a user question, and we ask the AI to answer in 3 sentences only.

Some other variations of this prompt are provided below. See which one works best for your scenario and use that.

·       AIPrompt = Here is a question from a learner: “ + userPrompt + ” Provide a detailed response.”;

·       AIPrompt = Act as a coach, and answer this question – “ + userPrompt;

·       AIPrompt = You are a communication skills trainer. A seminar attendee asks this question: “ + userPrompt + ” Answer with examples.”;

 

Tip: You could test various prompts in the usual ChatGPT interface to see which one works the best for your use.

Note: Pay attention not to change the code structure when updating the prompt. Specifically:

·       Any text from you should be in quotation marks “”.

·       The userPrompt variable, which carries the TextEntry input, should not be in quotation marks, and can be appended to your text using a + symbol.

·       The sentence should end with a ;

Step 6 – Display the output in your slide.

Display the output by adding a text box and inserting the output variable (GPT_Response). You can also do this directly by typing %GPT_Response% in the text box.

If you have changed the output variable name, update it accordingly on your slide.

Picture9

Step 7 – Publish to the web to test.

Storyline’s preview mode does not work with JavaScript. To test your implementation, publish to the web or create a review link.

Picture10

The AI might take a couple seconds to respond. You may want to tweak your AIPrompt based on the AI’s response to get the best, most consistent answers.

With that, you have created your first AI integrated eLearning interaction! Congratulations

Other Use Cases

Once you have the basic use case working, you can now try more interesting and adventurous applications. The great thing with AIReady is that it provides you a way to communicate with ChatGPT without limiting how it could be used. Anything that can be done in ChatGPT can be done via AIReady.

Note: At this time, this implementation does not support continued conversations via API calls. Every time the AI is called, it’s a new conversation. Therefore, you’d need to provide all required information in the prompt.  Prompts can be 500 tokens long at max (about 2000 words).

Providing Feedback

In this instance, you want ChatGPT to take the learner’s UserPrompt and provide feedback. Give the AIPrompt specific and concrete guidelines. You can also include examples to increase the accuracy of the feedback.

AIPrompt = “Check for grammar, spelling, and syntax errors. Quote the sentences in the following response when providing feedback: ” + userPrompt +” \n  For example, if the response has a long sentence, quote the sentence in your feedback and indicate that they should shorten their sentence.”;

 

Provide Feedback as an Expert

For generic topics with sufficient public information available, you can ask ChatGPT to ask an expert or known authority in the field and answer accordingly.

AIPrompt = “ Act as Brene Brown, a renowned expert in courage, vulnerability, shame, and empathy.. Answer this question by a learner: “ + userPrompt;

 

Multilingual activities

ChatGPT can respond in multiple languages, and therefore can be effectively used in eLearning modules of different languages. Just make sure to instruct it to respond in the language needed.

 

AIPrompt = “You are an expert around greenhouses gases and climate change. Someone asks: ” + userPrompt +” Answer this question in 3 sentences in French:”;

 

Provide Company specific context or document

AIReady offers versatile ways to incorporate company-specific context into your AI interactions. This can be achieved with or without the use of our ‘documents’ add-on.

Without the AIReady Docs add-on:

You can provide contextual information through direct input as part of the prompt itself. This allows the AI to tailor responses based on the specific context of your query. By referencing key document details in your queries, you can guide the AI’s responses. Please note the limit imposed by the length of your prompt.

AIPrompt = “Acme Inc’s work from home policy is that  employees need to work atleast 3 days a week form office. Only medical reasons are excluded. Managers can not exempt anyone without explicit permission from Vice president. \n As part of manager training, learners are asked to respond to this scenario:  Judy, your star team member, wants to work four days a week from home. She is willing to come to office on Wednesdays only. How would you respond in accordance with Acme Inc’s policies? \n The learner has answered as follows: ” + userPrompt +” \n Provide appropriate feedback in max 5 sentences to the learner’s answer. “;

With the AIReady Docs add-on:

To utilize the ‘documents’ add-on, begin by sending your documents to us (aiready@arthalearning.com) in either PDF or text file format. It’s important to ensure that any PDFs are text-only, without any non-text content like images or graphics. Once we receive your documents, our team will proceed with uploading them securely to a cloud-based vector database. This process includes the generation of a unique document ID for each document, which is vital for referencing them in your AIReady prompts.

When crafting a prompt, it is crucial to flank the document ID with newline characters “\n”. For example, your prompt might look something like

 

AIPrompt = ” \n <document> Documents/9d605c3a4a8a4d91175dd3b963db0</document> \n. ” + ” Answer this query : ” + userPrompt;

In this prompt, replace Documents/9d605c3a4a8a4d91175dd3b963db0 with your document ID.

This allows AIReady to accurately process and utilize your document’s content in response to your queries.

Assess User Input Based on a Rubric

Similar to the previous use case, you could send rubrics or other assessment criteria to ChatGPT and ask it to respond to user based on that.

AIPrompt = “Assess the email text provided based on this rubric: 1. Understanding of Email Communication (0-5 points) 2. Appropriate Response to the Situation (0-5 points) 3. Advice on Effective Email Communication (0-5 points) 4. Presentation and Writing Style (0-5 points) /n The email text is + userPrompt;

 

Roleplay (advanced application)

Building a roleplay currently requires sending all previous messages each itme, as the api currently is a ‘stateless’ model. This means it does not remember the previous conversations, and each conversation is started anew.

There are two ways of building a roleplay scenario. Either way, you will need to keep multiple variables to keep track of each user input and AI response. It is a good idea to have each ‘step’ of the conversation in a new layer to keep your multiple JavaScript calls and other assets organized.

The easy, lazy solution:

Keep building prompt on each call of AIReady as the roleplay progresses. You will need to provide both users as well as AI’s previous conversations.

Here is an example:

Step 1:

var userPrompt1 = player.GetVar(‘user_reply1’);

userPrompt = “Role play with me. You are looking for life insurance and are talking to a call center agent. I am the call center agent. Respond as the customer in a single sentence appropriately.”;

Step 2: Now we continue the conversation in our next trigger. 

var userPrompt1 = player.GetVar(‘user_reply1’);

var myReply1 = player.GetVar(‘GPT_Response1’);

var userPrompt2 = player.GetVar(‘user_reply2’);

userPrompt = “Role play with me. You are looking for life insurance and are talking to a call center agent. I am the call center agent. \n I said: ” + userPrompt1 +” \n Customer: ” + myReply1 +”\n I said: ” + userPrompt2 + ” \n Respond as the customer in a single sentence appropriately.”;

Step 3: Similarly, this conversation can be continued for as long as desired.

var userPrompt1 = player.GetVar(‘user_reply1’);

var myReply1 = player.GetVar(‘GPT_Response1’);

var userPrompt2 = player.GetVar(‘user_reply2’);

var myReply2 = player.GetVar(‘GPT_Response2’);

var userPrompt3 = player.GetVar(‘user_reply3’);

userPrompt = “Role play with me. You are looking for life insurance and are talking to a call center agent. I am the call center agent. \n I said: ” + userPrompt1 +” \n Customer: ” + myReply1 +”\n I said: ” + userPrompt2 + ” \n Customer said ” + myReply2 +”\n I said: ” + userPrompt3 +”\n Respond as the customer in a single sentence appropriately.”;

The right solution:

You could use an ‘array’ containing all the conversations to build your roleplay. An example of this approach looks like this:

				
					var userPrompt1 = player.GetVar('user_reply1');

var myReply1 = player.GetVar('GPT_Response1');

var userPrompt2 = player.GetVar('user_reply2');

var myReply2 = player.GetVar('GPT_Response2');

var userPrompt3 = player.GetVar('user_reply3');

systemPrompt = "Role play with me. Act as a customer at a call center. You are upset because you had to wait for 1 hour to get your flight AC456 rescheduled. The user is the call center agent. Respond as the customer in a single sentence appropriately.";
// systemPrompt is where we tell AI its role. It goes in the “role”:”system” below. userPrompts will go in “role”:”user” line and AI’s responses will go in “role”: “assistant” line.

AIPrompt = [
        {"role": "system", "content": systemPrompt},
        {"role": "user", "content": userPrompt1},
        {"role": "assistant", "content": myReply1},
        {"role": "user", "content": userPrompt2},
        {"role": "assistant", "content": myReply2},
        {"role": "user", "content": userPrompt3}
    ];

 //Now send this AIPrompt to AIReady
				
			

These were just a few examples of how to use AIReady. The use cases are only limited by your imagination, and we hope to hear about various ways you will use it in your work!

Advanced Techniques

·       Show AI response in a different layer or slide for a better learner experience.

·       Ensure your slide has enough space to display ChatGPT’s long answers. You can also limit it to a specific length by specifying the answer length in the prompt.

·       Use new line character “\n” to divide a very long prompt in paragraphs for AI.  

Debugging

Problem: ChatGPT is not responding

Debugging steps:

       Visit https://status.openai.com/ to confirm that ChatGPT is not down.

       Check your network settings to confirm your Internet is not down.

       Confirm your JavaScript code is exactly as per the code here. A long line in JavaScript should not be divided into multiple shorter lines. 

       Confirm that you are not checking in Storyline’s Preview mode, which does not work with JavaScript. Instead, publish to the Web to test.

       Confirm that the AIReady key is correct by checking it against your email.

 

Debugging (advanced):

If the above did not rectify the situation, and you have experience with coding, add debug messages in the code and use Chrome to see where the problem is by using Inspect Mode.

       config.log (AIPrompt);

       config.log (GPT_Response);

 

Problem: ChatGPT is not giving answers as desired.

Solution 1: Prompt Engineering

Play around with the format of the AIPrompt to achieve what you’d like. If needed, you can also include criteria and examples within the prompt to further guide the AI.

Solution 2: Check your variables

Double check your input and output variables in JavaScript against the ones in your slide. Sometimes, if you have copied and pasted your slide, the input variable would change automatically (For example, from TextEntry1 to TextEntry2), and would not match your JavaScript code.

Problem: ChatGPT’s response is too short or too long.

Solution: Prompt engineering and slide design

In your prompt, make sure to specify the length of the intended response.

Also ensure that the text field on your slide where the variable  %GPT_Response% is displayed is appropriately sized.

 

Problem: Re-loading slides remembers the previous slide answers.

Solution: Reset to initial state.

When a learner revisits the slide, they may see the AI’s previous response to their input. If that is not ideal, change the slide properties to reset to the initial state. 

Picture11

User Insights Report

Customers with LEAP or LEAD subscriptions will get a system generated User Insights report in the first week of every month unless opted out. The csv report will have timestamp, AI Prompts and AI Responses logged for the past month. 

Support

Please reach out to aiready@arthalearning.com and we’ll get back
to you in 3-5 business days. Please include your storyline file, and a
screenshot or screencast of the issue so we better understand your concerns.