Designing an interactive pie chart with labels

In this recipe, we work with an interactive chart, which is to be created after conducting a survey on our students. Therefore, our first step is to design a survey in our Moodle course.

How to do it...

We design an activity to ask our students to vote in order to create the interactive pie chart. We create the activity in a choice so that students can choose their favorite type of computer games. Afterwards, we draw the interactive chart with the results.

Choose the weekly outline section where you want to add the activity. These are the steps that you are going to follow:

  1. Click on Add an activity | Choice.
  2. Complete the Choice name and Introduction text blocks.
  3. Complete the Options blocks.
  4. Complete the Restrict answering to this time period, Miscellaneous Settings, and Common module settings blocks, as shown in the following screenshot:
    How to do it...
  5. Click on Save and return to course.

How it works...

Students click on the activity and vote. The way that this activity was designed, it won't allow students to vote more than once. This activity works as shown in the following screenshot:

How it works...

By the way, I have voted for board games; as you can see, I have no choice to vote again, and also we can see how many people voted.

There's more

After gathering the votes of our students, we can design the pie chart showing the results. Therefore, we can use Google Docs to create the interactive chart, write the data, and insert the chart, as shown in the following screenshot:

There's more

We have just used Google Docs like in the previous recipe, so we follow the same steps in order to create the chart, but in this case we choose pie chart.

Inserting an interactive pie chart with labels

We have already designed the chart in Google Docs and it is time to upload it in our Moodle course. We can create several types of activities where we can use the pie chart as a resource to enhance our Moodle course. The only step that we have to bear in mind is to copy the HTML code as we did in the previous recipe in order to paste it and embed the chart in our Moodle course.

In order to get the HTML code from Google Docs, follow these steps:

  1. Click on the downwards arrow in Share | Publish as a web page.
  2. Another pop-up window appears. Click on the downwards arrow below Get a link to the published data.
  3. Click on HTML to embed in a page.
  4. Copy the HTML code that appears in the block that reads Copy and paste the link above.
  5. Click on Close.
  6. Now that we have the HTML code, we can paste it in any activity that we want to design in our Moodle course.

See also

  • Embedding a line chart
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.76.164