Forum Discussion

Innowijs's avatar
Innowijs
Community Member
9 years ago

Infuence pie chart with variables

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

General E-Learning
storyline 360

35 Replies

Show More
  • JonEllinor's avatar
    JonEllinor
    Community Member
    9 years ago

    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

  • Innowijs's avatar
    Innowijs
    Community Member
    9 years ago

    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.

  • JordanBest's avatar
    JordanBest
    Community Member
    5 years ago

    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!