javascriptangularjsmoodlemoodle-mobile

How to add a new QR Code function to Moodle Mobile (written in Javascript)

I am tasked with adding a QR code generating feature to Moodle Mobile. But I have no idea where to start as I have little knowledge of Javascript.

The below image (see link) shows a quick sketch of how I want the mobile app to look like (the image is captured from PC Firefox)

In this case I want to:

  1. Add a "QR Code" button to the menu bar.

  2. When clicked, will take the user to a QR Code "Page" in which the user can enter a string then see the corresponding QR code generated immediately.

I have already done the QR code segment which is by davidshimjs

I tried inspecting elements using Firefox but I cannot find where do I "add a button" to the menu bar, not to mention where do I add a new "page" to the app. So I would like to know how do I integrate the QR code functionality into the Moodle app (add the button + connect to the QR code page)? Do I need to create a new plugin and how do I do that?

Your help is much appreciated.

Sketchup of how my Moodle app should look like

X-posted from Moodle.org forums

Solution

  • The menu bar should be located in /www/core/components/sidemenu/templates/menu.html, there you could simply add a new entry, like 

    <li>
   <a menu-close class="item item-icon-left" ng-href="{{siteinfo.siteurl}}" mm-link auto-login="yes" title="{{ 'mm.sidemenu.website' | translate}}">
      <i class="icon ion-earth"></i>{{ 'mm.sidemenu.website' | translate}}
   </a>
</li>

    Nevertheless, getting the QR stuff inside your app would require some advanced knowledge of the app and Angular JS. I wrote already some Angular desktop applications, but still I did not find any time to work on Moodle mobile, since it would take some time to get into it.

    So easiest workaround for you would maybe: