Infuence pie chart with variables

Aug 02, 2017

Media Innowijs
By Media Innowijs

Hi everyone,

 

I'm working on a survey kind of project where there will be a lot of questions that sorts your personality into five types. For example based on what answers the user gives he has 60% personality type 1 35%, type 2 and 5% type 3.  

I want to visualize those result into a pie chart. I found some JavaScript based things but I can't seem to influence the results with some variables.


Could someone please help me? :)

Kind regards,
Nurdianna

35 Replies
Jon Ellinor
over 6 years ago10/03/17 at 9:37 am (UTC)

Hi Owen

I'm getting somewhere now. I have a pie chart. Thank you very much!

Changing the subject slightly, out of interest how would I go about creating a quiz such as the one in this link?

https://www.mindtools.com/pages/article/newHTE_88.htm

The possible answers to the questions assigned a score (1-5) and at the end the learner is given a score total.

What would be the triggers that I need to assign to each radio button and what settings would I need to apply to the results page in order to get a total score?

Thanks again for all of your help.

Jon

Media Innowijs
over 6 years ago10/03/17 at 11:47 am (UTC)

Jon,

You could create a trigger that gives a certain amount of points if the user chooses an answer.
This trigger is similar to the one we used for the JS piechart.

Adjust variable
Add **points** to var1
When the user clicks Submit button
If Radiobutton1 is equal to Selected

Instead of the **points** you set the points you had in mind.

Media Innowijs
over 6 years ago10/03/17 at 1:09 pm (UTC)
Owen Holt

Lastly, this works in I.E. but does not seem to be valid for chrome.

Owen,
I thought about it and I was wondering if you published the project on a webserver or did you opened it local on your PC? Because it contains a extern JS file the project needs to be published online otherwise it would not work.

OWEN HOLT
over 6 years ago10/03/17 at 10:19 pm (UTC)

That was exactly it. I published to our LMS and it opens fine. However, after modifying my slide to include an input form to change the variables, I ran into an issue where the new numbers are not reflected. I believe it is due to the window.onload = function() command in the code. I wonder if there is another way of triggering the function or delaying when the window loads or refreshing the iframe to get the current data....
Any ideas?

Media Innowijs
over 6 years ago10/04/17 at 6:34 am (UTC)

Owen,

That's great to hear that it works! 

Do you have your results on the same slide as the variable input?
As far as I know the JS script will load when the slide appears, this means he's tracking the values of the variable at that moment. When you change your variables and don't refresh the slide in some way, the results appear the same. This is why I put my result slide after the variable input.
Or you can put a button in your slide that "calculates" the results.

I hope that this helps. :)

Jordan Best
almost 3 years ago05/11/21 at 5:15 pm (UTC)

Howdy! I'm trying to create a bar chart in SL360 using some HTML code, but I can't seem to call the variables from SL into the code.

Here's what I'm trying to do: I've inserted the bar chart code as a Web Object, and I'd like to use the variables from Storyline as the data to populate the chart. This is the code that works (saved as index.html):

<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
 type: 'bar',
 data: {
 labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
 datasets: [{
 label: '# of Votes',
 data: [12, 19, 3, 5, 2, 3],
 backgroundColor: [
 'rgba(255, 99, 132, 0.2)',
 'rgba(54, 162, 235, 0.2)',
 'rgba(255, 206, 86, 0.2)',
 'rgba(75, 192, 192, 0.2)',
 'rgba(153, 102, 255, 0.2)',
 'rgba(255, 159, 64, 0.2)'
 ],
 borderColor: [
 'rgba(255, 99, 132, 1)',
 'rgba(54, 162, 235, 1)',
 'rgba(255, 206, 86, 1)',
 'rgba(75, 192, 192, 1)',
 'rgba(153, 102, 255, 1)',
 'rgba(255, 159, 64, 1)'
 ],
 borderWidth: 1
 }]
 },
 options: {
 scales: {
 y: {
 beginAtZero: true
 }
 }
 }
});
</script>
</body

I'd like to use SL variables in place of the data: [12, 19, 3, 5, 2, 3], so it would look something like data: [var1, var2, var3, var4, var5, var6].

After doing some research, it seems I can call the parent.GetPlayer(); to call variables, but so far I haven't gotten anything to work. I added

var var1 = function getfromstoryline() {
var player = parent.GetPlayer();
player.GetVar("StorylineVar1");
}

right before the var ctx, but it's just showing as 0 (though the StorylineVar1 = 6).

Any help or guidance would be very appreciated!

Sign In to Reply