Forum Discussion

1 Reply

  • Hi Seanx!

    I am a big proponent of personalized learning experiences and I love that you want to use AI for this.

    Here's how I would approach this problem.

    Step 1: Create a text entry field to capture your learners' answers to the essay questions and name its variable as learnerAnswer.
    Step 2: Add an "evaluate" button next to the text entry field which the learner can click to receive their evaluation.
    Step 3: To this "evaluate" button add a Storyline trigger to Execute Javascript.
    Step 4: Copy paste this JavaScript to this trigger (This code works with our service but can be modified to work with any AI API  with a little bit of coding:

    var player = GetPlayer();
    var learnerAnswer = player.GetVar('learnerAnswer');
    var systemPrompt = `
    Roleplay as an evaluator. 
    You will receive an answer to an essay question from a learner. The question is this <insert question here>. 
    Respond to user in 10 lines. Ensure that your feedback follows this rubric <insert rubric here>.
    Do not include "Learner: " tag in your response.
    `;
    AIKey='YOUR AI API KEY'; //Here, you can add your AI key from the LLM provider of your choice. If you would like to //purchase one, contact us at aiready@arthalearning.com
    
    var AIPrompt = systemPrompt + "\n\n" + "Learner: " + learnerAnswer;
    
    // API call
    
    fetch(AIKey, {
        method: 'POST',
        body: JSON.stringify(AIPrompt),
        headers: {
            "Content-Type": "application/json",
        },
    })
    
    .then(response => {
        if (!response.ok) {
            return response.text().then(body => {
                throw new Error(`HTTP ${response.status} - ${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);
        });

    Step 5: Edit the code to add your variable name if you used something different and add your api key for the AI. If you would like to purchase an api key, reach out to us at mailto:aiready@arthalearning.com
    Step 6: Add a output box for the AI feedback and create and insert a variable named "GPT_Response" here. 
    Step 7: Preview, test, and iterate on the prompt.

    If you would like to view a demo of another implementation to see of this works, check out this link: https://arthademos.s3.us-east-2.amazonaws.com/AIReady+Demo+by+Artha+Learning/index.html.

    Happy to answer any other questions you might have!