General developer forum

How to add an interactive element to the course

 
Picture of Azat Ibatullin
How to add an interactive element to the course
 

Hello. I need to add interactive element to the course. Element is an abacus (for mental arithmetic). 
The teacher must specify the desired order of movement of the elements of the abacus, and the student repeat. Something like this

http://www.mathematik.uni-marburg.de/~thormae/lectures/ti1/code/abacus/soroban.html

Help me please

 
Average of ratings: -
Picture of Conn Warwicker
Re: How to add an interactive element to the course
Core developersParticularly helpful MoodlersPlugin developers

As a very simple example, using that abacus you linked to, you could create a file called abacus.html and put this as the content:


<html>

<head>

<title>Abacus</title>

<script type="text/javascript" src="//www.mathematik.uni-marburg.de/~thormae/lectures/ti1/code/abacus/abacus.js"></script>

</head>

<body>

<div id="myAbacus"></div>

<script>

var abacus = new Abacus("myAbacus", 0);

abacus.init();

</script>

</body>

</html>



Then if you upload that to your course as a file resource, it should display the HTML and let the students mess with the abacus.

Or you could upload a zip file with the HTML file and the javascript file, so you aren't relying on linking to that other website.

Or you could convert it to a SCORM package.

 
Average of ratings: Useful (2)
Picture of AL Rachels
Re: How to add an interactive element to the course
Core developersParticularly helpful MoodlersPlugin developersTesters

Hi Azat,

Another possibility, since you have access the the abacus.js file would be to use it to create a Generico filter bundle. That would then make it possible to place an abacus anywhere you can use the Moodle Atto editor.

 
Average of ratings: Useful (3)
Picture of Justin Hunt
Re: How to add an interactive element to the course
Particularly helpful MoodlersPlugin developers

As Al said, the Generico plugin is good for this sort of thing. It can package up JS/CSS/HTML into a self contained template/widget.

I went through and made a template for the abacus. It is attached to this post.

In a Moodle forum it looks like this:


See more about Generico here: https://moodle.org/plugins/filter_generico

See about using template bundles here: https://support.poodll.com/solution/articles/19000086450-how-to-use-generico-bundles


 
Average of ratings: Useful (4)
Picture of Azat Ibatullin
Re: How to add an interactive element to the course
 

Thank you very much! and the rest too, thanks cool Yes

You helped me a lot

 
Average of ratings: -