How to prepare your Easy JavaScript Simulation to be data analytics enabled. (for SLS integrated App)

Updated! 20231009

https://app.tango.us/app/workflow/EJSS-App-SLS-Flow-2--Preparing-your-Easy-JavaScript-Simulation-to-be-data-analytics-enabled--356b7d2910124804944ba054cff56afb 

How to get Easy JavaScript Simulation to be data analytics enabled.

1. Download JavaScript_EJS_6.1 to a folder of your choice and unzip it BETA_201115  https://gitlab.com/ejsS/JavaScriptEditor/release/-/blob/master/JavaScript_EJS_6.1%20BETA_201115.zip 
   
   
   
2. Open EJSS authoring toolkit or called editor by opening JavaScript_EJS_6.1 BETA_201115 - EjsConsole.jar
   
3. Find the simulation that you want to enable Moodle data analytics 
   
   
   
4. Add the QuestionLib in Custom tab https://github.com/lookang/codesforejss/blob/master/assessment/questionLib.js copy from // Assume ECMAScript 6; Chrome >=49, Edge >=14, Firefox >=41, Opera >=36, Safari >=8 and all the rest below this line, refer to this post for the full syntax on how to use the QuestionLib
   
   
   
5. Read the existing EJSS source code and understand how it works first. Refer to https://iwant2study.org/ospsg/index.php/events/883-20190219-sls-hackathon-etd-cpdd if you need a 272 step by step tutorial on how to create a simple game in EJSS to understand how EJSS source code works.
6. Option 1A: 202308-8 method is to add this code in the initialization
   
   
   tab  https://github.com/lookang/codesforejss/blob/master/window.setTimeout(_reset,100)
• if (!clicked){ window.setTimeout(_reset,500); clicked=true;}
7. the purpose is to force a _reset() 500ms later once using the variable clicked. In variable tab, create a variable called "clicked" with no initial values. This way, the Moodle will reset and display everything in place and also startQuestion(`Q${1}`)
   
   
   
8. Option 1B: older alternative: where to add startQuestion, in this example I decided to add into the Play button 
9. To add the variable `isQuestionAnswered` with an initial value of `false` and a type of `boolean` to check if the communication between EJSS and Moodle has started, you can make the following changes as shown
   
   
   
10. Option 2: for a more in-depth gamification student learning experience where first attempt is full marks say (2), and 1 mark for greater than 2 attempts, 0 for incorrect, a more sophisticated method is needed and you can use the code that look like this (copy and paste, the bullet pointed will not be copied over in EJSS authoring toolkit)
• if (once) {
•       addQuestionHistory(`$ {
•         questionNumber
•       } = $ {
•         question
•       } `); //moodle part of the history
•       once=false
•     }
•     onAnswer(coordinates,true)
•     if (isFirstTry) {
•       awardQuestionMarks(2);
•       once=true // set back to true to prepare for next q
•     }
•     else {
•       awardQuestionMarks(1);
•       isFirstTry =true //reset
•       once=true // set back to true to prepare for next q
•     }
11. Once is a variable to check if user enters this mode one time only. if `isFirstTry` is true `awardQuestionMarks (2)`, else `awardQuestionMarks (1)`
12. The function of `awardQuestionMarks(1)` where the inside is the number of marks to be awarded. By looking at the existing code, I added this code into the Event for ODE Collision
13. The function of add `onAnswer(v1, v1 == v1answer)` is to display the history of successful and unsuccessful answers. The first parameter is answer, second is isCorrect. This is help to display the correct and wrong history

    

    
    
14. The function of add endQuestion() is to indicate the end of the question and it stamps the end of Question 

    

    
    
15. Run the simulation and preview the output on the browser, click Play etc to observe the user outputs
16. The function of `const debugMode = true` is to allows the Console to be used for debugging purposes in this manner, to turn it off, change from true to false. Turn to True for debugging, turn to false for deploying to production.
17. Next Prepare the assessment.json file by downloading and saving it inside the workspace with the source for this simulation. E.g. /Users/lookang/Public/workspace/source/zdtan/ejss_model_Collisions1D/. You may download the file here  
18. Run the file using Visual Code Studio 

    

    
    
19. Notice the file is opened in VCS

    

    
    
20. Select Restricted Mode and click Trust

    

    
    
21. Navigate to line 34 and change the "Q0" etc to as many as you have designed for, For this case, Darren has 0 to 7 stages which i use Q0 to Q7 to mean the same thing

    

    
    
22. Click on the run button

    

    
    
23.  Select and copy out the Terminal starting from {"tasks"......]}

    

    
    
24. Save as a new file and rename it as assessment.json, and this file need to be inside the root of the ejss source folder 

    

    
    
25. And paste the output of the terminal into the new file

    

    
    
26. Press on my keyboard "[SHIFT][OPTION][f]" for Mac Users and for "[SHIFT][ALT][f] for Windows Users to format it

    

    
    
27. And save the file by [COMMAND][s] for Mac Users, or [CONTROL][s] for Windows users.
28. Add the assessment.json file into Information (top right corner icon) - Run options - User files -  assessment.json. This allows future assessment.json model deployment to be zipped in the source code.

    

    
    
29. Export the file as model and give the link to the file to Wee_Loo_Kang@moe.edu.sg or Lawrence_WEE@moe.gov.sg for him to upload. He will email you in 3 to 5 working days to inform you when your model is ready to be used.