Ideas for iDevices

This topic contains 3 respuestas, has 0 voices, and was last updated by  pggonzalez Hace 7 meses, 2 semanas.

  • Author
    Entradas
  • #38232

    pggonzalez
    Member

    Good day! I’m a teacher in the Philippines, and I’ve been using eXeLearning for a few months now. I really like it. I’ve also tried other free e-learning authoring software, and I think yours is the one with the best balance of features, flexibility and usability.

    One of the e-learning tools I’ve been comparing with eXe is Xerte Online Toolkits from University of Nottingham. They have a lot of different types of content, but I think the installation is difficult for ordinary users, and the templates are a bit restrictive. You can see samples of their content types here.

    I am wondering how difficult it is to create iDevices. Would it be possible to mimic some of these types of content, for example, Drag and Drop activities.

    Thank you for your time.

  • #38233

    Ignacio Gros
    Keymaster

    Hi,

    Creating an new iDevice is easy if you know JavaScript. Just check these files: webui/scripts/idevices/example-idevice You can copy that folder, change its name and rename the iDevice in the config.xml file to see how it works.

    Here you will find some documentation too (in Spanish only, sorry…).

    The idea is to renew the whole program, and there will be a new API to create iDevices too, but it’ll be as compatible to the current one as possible. There’s no date for that renewal yet.

    Thank you very much for your suggestions!

  • #38234

    pggonzalez
    Member

    You don’t need to apologize about the documentation. You and your team are all Spanish-speaking, so it’s understandable that your documentation is in that language.

    Unfortunately, my knowledge of JavaScript is very basic. I am looking at the example-idevice, and I’m still trying to understand it. At the same time, I’m playing around with the code below in a Free Text idevice. I can make draggable items and areas in which to drop them, but I’m still trying to figure out a way to make the items only go to specific areas. I think it might be useful for a teacher who wants to ask students to drag-and-drop labels on an image.

    <script>
    function allowDrop(ev) {
      ev.preventDefault();
    }
    
    function drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }
    
    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
    }
    </script>
    <div class="exe-layout-2-cols exe-layout-2-30-70 exe-clear">
    <div class="exe-col exe-col-1">
    <ul ondrop="drop(event)" ondragover="allowDrop(event)" style="min-width: 100px; min-height: 100px; border: 1pt solid black; float: left; margin: 10px;">
    <li draggable="true" ondragstart="drag(event)" id="drag1">Item A</li>
    <li draggable="true" ondragstart="drag(event)" id="drag2">Item B</li>
    <li draggable="true" ondragstart="drag(event)" id="drag3">Item C</li>
    </ul>
    </div>
    <div class="exe-col exe-col-2">
    <div id="dropA" style="width: 100px; height: 100px; border: 1pt solid black; float: left; margin: 10px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="dropB" style="width: 100px; height: 100px; border: 1pt solid black; float: left; margin: 10px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="dropC" style="width: 100px; height: 100px; border: 1pt solid black; float: left; margin: 10px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div>
    </div>
  • #38235

    Ignacio Gros
    Keymaster

    Thanks for sharing the idea and the code.
    About the iDevices:
    Use the config.xml file to define the iDevice name, CSS class, icon…
    Use anything inside the “edition folder” to create a form and save the information as HTML (or JSON) in a TEXTAREA. An iDevice is just an icon and a title (both optional) and content from a TEXTAREA. The edition part is mostly creating that form.
    Anything in the “export” folder will be exported. The CSS and JS files will be included in the HEAD tag in alphabetical order.
    I hope it helps.

You must be logged in to reply to this topic.