Why I Finally Decided to Learn JavaScript

My Journey into JavaScript

I began learning the basics of web development at the end of the 1990s, while at University. However, JavaScript always felt like something horrifically complicated and I ignored it. When I started working in web development around 2015, it again proved just too much of an extension. Learning the new elements of HTML5 and CSS3 was easy. When it came to JavaScript I got into my own head and forced myself to have doubts about not being able to begin to learn it.

Role on to 2023, and learning and exploring Articulate Storyline 360. As a second portfolio piece, I decided to recreate a UX project I had prepared for the Google UX Course. Replicating the “Quiz Taking App” proved challenging. I hit the point where I couldn’t create exactly what I had wanted to. Maybe in a different setting, this would not have been the problem I felt it was. I had created a working prototype and successfully tested it with users. However, within the base of Articulate Storyline 360, I couldn’t solve the problem.

The Big Problem

As part of the quiz app, feedback at the end of the quiz was very important. This had been highlighted by users as an essential feature.

All questions in the quiz were multiple choice, with four options. In seven of the ten questions, there was a single correct option. In the other three questions, there were two options required for full marks. The single-option answers were reasonably easy to deal with within Articulate Storyline. I could create different states for the answers and associated feedback. Depending on the user’s answers, the variables would change and set the state of the feedback.

I attempted to use a similar approach to the three multi-response questions. No matter how I approached the situation the outcomes was less than desirable. Either it ended up with a huge number of variables, or blank spaces between feedback options. In one iteration I tried applying pop-ups to deliver feedback. These were all less than desirable. So I decided to find a solution using JavaScript.

Learning JavaScript

After looking for solutions I began to see JavaScript as a possible solution. I didn’t know where to begin, so I went to YouTube, and I discovered Zsolt Olah. Zsolt has created an incredible reference in his Project 99 online resource book. However, early on I really felt out of my depth. So decided I had to learn JavaScript.

I turned to Coursera.org and found Scrimba. I enrolled in the Scrimba introduction to JavaScript course. The introductory course was fascinating. I’ve written a blog post reviewing my experience of both the “Learn JavaScript” and “JavaScript Deep Dive” courses.

My Solution to the Feedback Problem

const player = GetPlayer();

const q3UserAns = [
    `I am the superman of marketing | I get the job done | time Is money`,
    `Experienced engineer|Scrum/Agile trained|Management experience`,
    `Highly motivated project manager with a people first centred approach to goal achievement.`,
    `Hardworking mother of three, an expert on a tight budget and keeping the customers happy.`
];
const q3UserFeedbk = [
    `<b>Feedback:</b> Hollow words, and big statements are unlikely to be viewed as high value skills.`,
    `<b>Feedback:</b> This choice works as it shows high value skills straight off. The use of | to separate key words is an acceptable approach.`,
    `<b>Feedback:</b> This statement works well to quickly show the users high value skills.`,
    `<b>Feedback:</b> While this fun, it’s not really focusing on the business skills that the mother could bring to the table.`
];
const aKQ3 = [0, 1, 1, 0];


const q3Opts = [
    player.GetVar("AnswerQ3Opt1"),
    player.GetVar("AnswerQ3Opt2"),
    player.GetVar("AnswerQ3Opt3"),
    player.GetVar("AnswerQ3Opt4")
];


let ans=[];
let feedbk=[];
let ansCheck=[];


function prepareFeedback(act, user,UserFbk, UserAns){
    for(i=0; i<user.length; i++){
        if(user[i]===1){
            ans.push(UserAns[i]);
            feedbk.push(UserFbk[i]);
            if (user[i]===act[i] && user[i]===1){
                ansCheck.push("C")}else{
                    ansCheck.push("I")}; 
                }
                }
            };

prepareFeedback(aKQ3, q3Opts, q3UserFeedbk, q3UserAns);


!ans[0] ? player.SetVar("feedback3A", "- You did not answer this question.") : player.SetVar("feedback3A",`${ans[0]}

${feedbk[0]}`);
!ans[1] ? player.SetVar("feedback3B", "") : player.SetVar("feedback3B",`${ans[1]}

${feedbk[1]}`);
!ans[2] ? player.SetVar("feedback3C", "") : player.SetVar("feedback3C",`${ans[2]}

${feedbk[2]}`);
!ans[3] ? player.SetVar("feedback3D", "") : player.SetVar("feedback3D",`${ans[3]}

${feedbk[3]}`);

Once I had found this elegant solution, I decided to apply it to all feedback for all questions.

One of the key parts of the Quiz App design was personalised dialogue. While, it is acceptable to use “Welcome James R Mackay…”, just using the first name is more personal. So I created a script that took a full name spliced off it into first name and last name. These were then returned to storyline and storing them in their own unique variables.

With the taste of what JavaScript could do, I turned my attention to applying to other areas of the project. I create a scoring script that removed over 22 variables that fired off when the user exited the quiz.

Allowing the user to restart the quiz and have a second attempt was a problem with so many variables in play. Jumping to the start of the quiz doesn’t reset all the variables. Consequently, I created a script that reset all variable to their default values. Except for the user name variables.

Finally, at the end of the quiz and as I was finalising the project I decided to add a downloadable certificate. The certificate would include the user’s full name, their score, and the date. The certificate was produced using jsPDF and was run from a script I prepared for Storyline. I’ve written an overview of the script including the updates and changes that I made.

Using JavaScript in collaboration with Articulate Storyline helps create more effective learning solutions. I now feel confident attacking complex challenges within Storyline. I am confident in my JavaScript abilities can be used to improve and extend Storyline.

If want a different perspective on an Articulate Storyline problem then let’s connect. Let’s see if we can find a solution together.