{"id":966,"date":"2024-08-19T23:41:47","date_gmt":"2024-08-19T23:41:47","guid":{"rendered":"https:\/\/cluelabs.com\/blog\/?p=966"},"modified":"2024-08-20T00:40:18","modified_gmt":"2024-08-20T00:40:18","slug":"using-ai-to-generate-scenarios-and-score-typed-responses-in-articulate-storyline-elearning","status":"publish","type":"post","link":"https:\/\/cluelabs.com\/blog\/using-ai-to-generate-scenarios-and-score-typed-responses-in-articulate-storyline-elearning\/","title":{"rendered":"Using AI to Generate Scenarios and Score Typed Responses in Articulate Storyline eLearning"},"content":{"rendered":"\n

Before we begin:<\/strong><\/p>\n\n\n\n

The published (and slightly improved) project is posted as a demo at https:\/\/cluelabs.com\/ai-chatbot-elearning-widget#section-ai-chatbot-demos<\/a> (demo #2)<\/p>\n\n\n\n

You can also download the .story file at https:\/\/storage.googleapis.com\/us-east1-clabs-blog-images\/0other\/using-ai-to-generate-scenarios\/AI%20LLM%20scenarios%20starter.story<\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

Using AI LLMs to generate dynamic learning content, feedback, etc.<\/h2>\n\n\n\n

It\u2019s easy to use AI tools like ChatGPT to generate a text paragraph and then use this text in a course authoring tool like Articulate Storyline. But this is just the tip of the iceberg of what AI can really do for elearning. This page provides a step-by-step guide on integrating and using AI LLM (Large Language Model) to do much more\u2026<\/p>\n\n\n\n

What can you do?<\/strong><\/td>Why should you do it?<\/strong><\/td><\/tr>
Dynamically generate a new and unique scenario\/assignment every time a learner accesses a slide.<\/td>You can give learners access to unlimited ever-changing scenarios to practice valuable skills multiple times and as often as they want.<\/td><\/tr>
Use AI to score learners\u2019 submissions and provide instant feedback.<\/td>When a learner submits a typed response, an essay, or another type of unstructured submission, they can get instant feedback and recommendations.<\/td><\/tr>
Keep track of everything that both AI and your learners generate throughout the course.<\/td>As a learning administrator, you want to keep your hand on the pulse and be able to see what AI generates and how your learners respond to AI-generated scenarios.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Dynamically generate a new and unique scenario\/assignment every time a learner accesses a slide.<\/h2>\n\n\n\n

Creating an AI LLM connection for your Articulate Storyline project:<\/h3>\n\n\n\n

1. Go to cluelabs.com<\/a><\/p>\n\n\n\n

2. Sign in or create a free account<\/p>\n\n\n\n

3. Click the Chatbot<\/strong> tile<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

4. Click New Chatbot<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

5. Under Supported Interactions<\/strong>, select Articulate Storyline<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

6. In the Knowledge Base<\/strong> section, click Select a Different Source<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

7. Select the third option to use ChatGPT<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

8. Make sure that the Optional Instructions<\/strong> field is empty and that the character count is zero<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

9. Click the Use the Chatbot<\/strong> tab<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

10. In the Storyline Widget<\/strong> section, grab the Widget ID<\/strong> and download the starter .story file<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Setting up the AI LLM connection in Articulate Storyline:<\/h3>\n\n\n\n

11. Open the starter .story file you downloaded and copy the JavaScript trigger on slide start<\/strong>; this code loads the LLM connection<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

12. Recreate this trigger on slide Master \u2013 you need to ensure that this script completes before you attempt to use AI<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

13. Create a variable clabsAnswersWidgetID<\/strong> and set the default value to the widget ID you received when you were setting up the AI connection <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

14. Create a variable clabsAnswersUserMessage<\/strong><\/p>\n\n\n\n

15. Create a variable clabsAnswersResponseMessage<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Using AI to generate a new scenario on slide start:<\/h3>\n\n\n\n

16. Create a new layer (we\u2019ll call it generate<\/strong>) and make sure that it\u2019s set to hide other layers and to reset to initial state when revisiting<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

17. Create a new text variable and call it action<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

18. On the generate<\/strong> layer, create a trigger to set action<\/strong> to value generate<\/strong> when the layer starts<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

19. We will use the following prompt for AI to generate a new scenario<\/p>\n\n\n\n

\n

You are writing mock product reviews for customer service training. Come up with the following information:
– A customer name;
– A one-paragraph review the customer wrote after purchasing a consumer electronics product (must include at least one issue).
Respond with a valid JavaScript JSON object in the following format: {“name”:””, “review”:””}<\/p>\n<\/blockquote>\n\n\n\n

20. Create a trigger to set the variable clabsAnswersResponseMessage<\/strong> to blank when the layer starts<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

21. Create a JavaScript trigger to execute when the layer starts<\/p>\n\n\n\n

let player=GetPlayer();
let usermessage = 'You are writing mock product reviews for a customer service training. Come up with the following information: \\n- A customer name; \\n - A one-paragraph review the customer wrote after purchasing a consumer electronics product (must include at least one issue).\\nRespond with a valid JavaScript JSON object in the following format: {\"name\":\"\", \"review\":\"\"}';
player.SetVar('clabsAnswersUserMessage',usermessage);
clabsAnswersGetAnswer();<\/code><\/pre>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
22. Create two new text variables \u2013 review_name<\/strong> and review_text<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
23. Create a trigger to execute when the variable clabsAnswersResponseMessage<\/strong> changes if the variable action is set to generate and clabsAnswersResponseMessage<\/strong> is not equal to blank (it will execute when the scenario generation completes)<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
let player=GetPlayer();
let resp = player.GetVar('clabsAnswersResponseMessage');
let regex = \/\\{.*?\\}\/s;
const match = resp.match(regex);
resp = resp.replaceAll(\"\\n\",'');
let extractedJson = resp.match(regex) ? resp.match(regex)[0] : '{}';
let review = JSON.parse(extractedJson);
player.SetVar('review_name', review.name);
player.SetVar('review_text', review.review);<\/code><\/pre>\n\n\n\n
24. Create a trigger to hide this layer when the variable clabsAnswersResponseMessage<\/strong> changes if the variable action is set to generate and clabsAnswersResponseMessage<\/strong> is not equal to blank (it will execute when the scenario generation completes)<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
25. Return to the base layer of the slide and add variable references review_name<\/strong> and review_text<\/strong> where you would like to display the name of the customer and the product review<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
26. Create a trigger to show layer generate<\/strong> when the slide timeline on the base layer starts<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Using AI to evaluate responses submitted by the learners:<\/h3>\n\n\n\n
27. Add a text entry field for the users to type their responses and a Submit<\/strong> button<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
28. Add a new layer, we\u2019ll call it score<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
29. Add a trigger to show layer score<\/strong> when Submit<\/strong> is clicked<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
30. Add a trigger to set the variable action<\/strong> to score<\/strong> when the timeline starts on the layer<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
31. Add a trigger to set the variable clabsAnswersResponseMessage<\/strong> to a blank value when the layer timeline starts<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
32. Add three new text variables \u2013 score_greeting<\/strong>, score_ack<\/strong>, score_solution<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
33. Add a trigger to execute JavaScript when the timeline starts on this layer<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
let player = GetPlayer();
let review_text = player.GetVar('review_text');
let response_text = player.GetVar('TextEntry');
let prompt = 'You are evaluating a message provided by customer service in response to this customer complaint: '+review_text+' \\nAnswer Y for \"yes\" or N for \"no\": \\nDoes the customer service message include a greeting?\\nDoes the customer service message include an acknowledgment of the issue?\\nDoes the customer service message offer a solution to address the issue?\\nRespond with a JSON object in the following format {\"greeting\":\"\", \"acknowledgment\":\"\", \"solution\":\"\"}\\nResponse message to evaluate: '+response_text;
player.SetVar('clabsAnswersUserMessage',prompt);
clabsAnswersGetAnswer();<\/code><\/pre>\n\n\n\n
34. Create a trigger to execute when the variable clabsAnswersResponseMessage<\/strong> changes if the variable action is set to score and clabsAnswersResponseMessage<\/strong> is not equal to blank (it will execute when response evaluation completes)<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
let player=GetPlayer();
let resp = player.GetVar('clabsAnswersResponseMessage');
let regex = \/\\{.*?\\}\/s;
const match = resp.match(regex);
resp = resp.replaceAll(\"\\n\",'');
let extractedJson = resp.match(regex) ? resp.match(regex)[0] : '{}';
let score = JSON.parse(extractedJson);
player.SetVar('score_greeting', score.greeting.toUpperCase());
player.SetVar('score_ack', score.acknowledgment.toUpperCase());
player.SetVar('score_solution', score.solution.toUpperCase());<\/code><\/pre>\n\n\n\n
35. The variables score_greeting<\/strong>, score_ack<\/strong>, score_solution<\/strong> will each contain one letter (\u201cY\u201d or \u201cN\u201d) depending on the submitted response (whether the response included a greeting, whether it included an acknowledgment of the issue, whether it included a solution proposal)<\/p>\n\n\n\n
36. You can add more objects to display on the layer in order to provide feedback to the learner based on the evaluation<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Logging the text of the scenarios and responses to keep track of the performance of both AI engine and the learners who interact with the scenarios:<\/h3>\n\n\n\n
37. Return to cluelabs.com<\/a> and log in<\/p>\n\n\n\n
38. Select the Data Cloud<\/strong> tile on the dashboard<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
39. Click New Data Cloud Table<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
40. Leave the authoring tool as Articulate Storyline<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
41. Under Data Fields<\/strong>, add fields review<\/strong> (text), response<\/strong> (text), greeting<\/strong> (true\/false), acknowledgment<\/strong> (true\/false), solution<\/strong> (true\/false)<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
42. Click Save<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
43. Click See the Complete List of Triggers<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
44. Return to Storyline and create a variable stencilusertoken<\/strong> as instructed in step 1<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
45. Copy the code shown in step 3<\/p>\n\n\n\n
\"A<\/figure>\n\n\n\n
46. Create a new JavaScript trigger on the slide Master to execute when the timeline starts, and paste the code you just copied<\/p>\n\n\n\n
\"A<\/figure>\n\n\n\n
47. On the layer score locate the trigger that executes when the variable clabsAnswersResponseMessage<\/strong> changes (the trigger that you created earlier)<\/p>\n\n\n\n
\"A<\/figure>\n\n\n\n
48. Add the following code to the end of the JavaScript code in this trigger<\/p>\n\n\n\n
player.SetVar('stencilusertoken', '');
CloudSet('review', player.GetVar('review_text'));
CloudSet('response', player.GetVar('TextEntry'));

if (score.greeting.toUpperCase()==='Y') { 
    CloudSet('greeting', true);
} else {
    CloudSet('greeting', false);
}

if (score.acknowledgment.toUpperCase()==='Y') { 
    CloudSet('acknowledgment', true);
} else {
    CloudSet('acknowledgment', false);
}

if (score.solution.toUpperCase()==='Y') { 
    CloudSet('solution', true);
} else {
    CloudSet('solution', false);
}<\/code><\/pre>\n\n\n\n
\"A<\/figure>\n\n\n\n
You are all set! You can now publish your project and test the scenario generation as well as response evaluation features powered by an AI large language model.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Before we begin: The published (and slightly improved) project is posted as a demo at https:\/\/cluelabs.com\/ai-chatbot-elearning-widget#section-ai-chatbot-demos (demo #2) You can also download the .story file at https:\/\/storage.googleapis.com\/us-east1-clabs-blog-images\/0other\/using-ai-to-generate-scenarios\/AI%20LLM%20scenarios%20starter.story Using AI LLMs to generate dynamic learning content, feedback, etc. It\u2019s easy to use AI tools like ChatGPT to generate a text paragraph and then use this text […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[24],"_links":{"self":[{"href":"https:\/\/cluelabs.com\/blog\/wp-json\/wp\/v2\/posts\/966"}],"collection":[{"href":"https:\/\/cluelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cluelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cluelabs.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cluelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=966"}],"version-history":[{"count":0,"href":"https:\/\/cluelabs.com\/blog\/wp-json\/wp\/v2\/posts\/966\/revisions"}],"wp:attachment":[{"href":"https:\/\/cluelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cluelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cluelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}