WIRIS quizzes 2. Integration guide

Transcription

1 WIRIS quizzes 2. Integration guide Document Release: may, Maths for More Contact: Summary. This guide explains a set of scenarios solved with WIRIS quizzes 2. It starts explaining how to call WIRIS quizzes services to evaluate a student answer and, then, how to integrate WIRIS editor in a quizzes system context. Contents Where can be integrated WIRIS quizzes?... 2 Comparing the equivalence of two formulas... 3 Embedding WIRIS editor... 4 Customizing WIRIS editor toolbar... 5 Comparing two formulas with additional criteria... 6 Step 1. Obtaining the question XML... 6 Step 2. Using the question descriptor in your program... 8 Validate the student answer with a custom algorithm... 9 Change input symbols: working with physics units Allowing physical units in WIRIS editor Integrating WIRIS quizzes studio in your own platform... 13

2 Maths for More 2016 WIRIS quizzes integration guide Page 2 of 13 Where can be integrated WIRIS quizzes? WIRIS quizzes mainly targets Web applications. There are currently five integrations that you can download as part of the respective Getting started example: 1) PHP integration 2).NET integration 3) Java integration 4) JavaScript integration 5) ActionScript 3/Flash integration The PHP,.NET and Java integrations require that you programmatically call the WIRIS quizzes API in order to evaluate the answer of a student. This invocation is done from the server-side. For the JavaScript and ActionScript 3/Flash integrations, you also need to programmatically call the WIRIS quizzes API. But, instead, the invocation is done from the browser. This option is less secure because the correct answer is also sent to the client browser. It s worth to note that the JavaScript and ActionScript 3/Flash integrations also need some serverside scripts used to connect your server with WIRIS quizzes server. Such scripts are part of the integration (Getting started examples) that we already provide for you. In any case, the ultimate evaluation of the student answer is performed by WIRIS quizzes using its Web services: Browser Your server WIRIS quizzes integration WIRIS quizzes Web-services

3 Maths for More 2016 WIRIS quizzes integration guide Page 3 of 13 Comparing the equivalence of two formulas This section explains how to compare the equivalence of two formulas given by plain text or MathML. We will check that x+1 is equivalent to 1+x. First download the getting started source code from compatible with your technology. Let s note that all this examples will connect to to perform the actual computations. The source code to compare $correctanswer and $studentanswer is as follows. <?php require_once 'quizzes/quizzes.php'; $correctanswer = "x+1"; $studentanswer = "1+x"; //build a request for the service. $builder = com_wiris_quizzes_api_quizzesbuilder::getinstance(); $request = $builder->newevalrequest($correctanswer, $studentanswer, null, null); //Make the remote call. $service = $builder->getquizzesservice(); $response = $service->execute($request); //Get the response into this useful object. $instance = $builder->newquestioninstance(); $instance->update($response); //Ask for the correctness of the 0th response. $correct = $instance->isanswercorrect(0); echo $correct;?> This example depends on the quizzes/quizzes.php and related files that can be found in the getting started source code. Any or both $correctanswer and $studentanswer could contain MathML. For example, $correctanswer = "<math><mi>x</mi><mo>+</mo><mn>1</mn></math>"; The importance of MathML is that it can be edited with WIRIS editor, see next section of this documentation. Further discussions about the API can be found WIRIS quizzes API.

4 Maths for More 2016 WIRIS quizzes integration guide Page 4 of 13 Embedding WIRIS editor Students will input the answers using either a simple text box or a full formula editor. This section explains how to embed a formula editor. This same procedure can be repeated many times if you need more than one formula editor. Edit a file called editor.html and write <!DOCTYPE html> <html> <head> <script src= " ></script> <script> function displayeditor() { // Get WIRIS quizzes User Interface Builder. var builder = com.wiris.quizzes.api.quizzesbuilder.getinstance(); var uibuilder = builder.getquizzesuibuilder(); // Build student's answer field. answerfield = uibuilder.newanswerfield(null, null, 0); var answercontainer = document.getelementbyid("studentanswer"); answercontainer.replacechild(answerfield.getelement(), answercontainer.firstchild); } window.onload=displayeditor; </script> </head> <body> <!-- This input will be replaced by a WIRIS editor. --> <div style="width:500px;height:200px" id="studentanswer"><span></span></div> <br> <input type="button" value="get MathML" onclick="alert(answerfield.getvalue())"/> </body> </html> The <your-domain>/quizzes/service.php URL part should point to the quizzes folder that you will find in the Getting started example for your technology. With this code you will see the following page where the toolbar contains the significant symbols for a quizzes scenario and the syntax checking is enabled.

5 Maths for More 2016 WIRIS quizzes integration guide Page 5 of 13 Customizing WIRIS editor toolbar The default WIRIS editor will be fine for many scenarios but you will, eventually, want to configure the toolbar icons or any other aspect. You can check the documentation in Embed WIRIS editor to get an idea of the available initialization parameters. To configure WIRIS editor, you will need to specify the initialization parameters as follows:... answerfield = uibuilder.newanswerfield(null, null, 0); answerfield.seteditorinitialparams({ 'toolbar':'<toolbar><tab rows="1" ref="general" empty="true">'+ '<item ref="fraction"/>'+ '<item ref="squareroot"/>'+ '<item ref="nroot"/>'+ '<item ref="+"/>'+ '<item ref=" "/>'+ '<item ref="-"/>'+ '<item ref=" "/>'+ '</tab></toolbar>', });... Example of customized toolbar:

6 Maths for More 2016 WIRIS quizzes integration guide Page 6 of 13 Comparing two formulas with additional criteria When comparing the correct answer with the student answer, for example, it is possible to request further requirements like the the student answer should be simplified. Following the example, the student is asked to compute (x 2 + 3) (2 + 2x 2 ) and the correct answer should be 1 x 2 or x instead of x 2 2x 2 + 1, which is invalid because it is not simplified. WIRIS quizzes allows using many additional criteria. For this purpose we will use WIRIS quizzes studio to define the question that will be sent to the evaluation server at Step 1. Obtaining the question XML You will get the description of the question via WIRIS quizzes studio. The question description XML is an xml file that describes how the student answer will be evaluated. The most common scenario will be to compare the students answer with the correct one. Note that the correct answer is not necessarily part of the question description which means that a single question description can be used by many different correct responses. To use WIRIS quizzes studio, visit and you will get: And press the icon to open WIRIS quizzes studio. Type the Correct answer 1 x 2 with the sole purpose to check the question works fine.

7 Maths for More 2016 WIRIS quizzes integration guide Page 7 of 13 Move to Validation tab and check is simplified. Move to Preview and play with possible student s answers. You will realize that x is a valid response and 1 2x 2 + x 2 is wrong because it is not simplified.

8 Maths for More 2016 WIRIS quizzes integration guide Page 8 of 13 Now, we will get the Question XML in order to use it in our program. Type Shift+Ctrl+Q and the following dialog will appear: You can copy the Question XML and save it into a file named simplified.xml. Step 2. Using the question descriptor in your program Create a file named example2.php with the following content <?php require_once 'quizzes/quizzes.php'; $correctanswer = "x+1"; $studentanswer = "1+x"; $builder = com_wiris_quizzes_api_quizzesbuilder::getinstance(); // Read question $filename = dirname( FILE ). '/simplified.xml'; $requeststr = file_get_contents($filename); $question = $builder->readquestion($requeststr); // Create question request $questionrequest = $builder->newevalrequest($correctanswer, $studentanswer,$question,null); // Send the xml request data $service = $builder->getquizzesservice(); // Call the web service $response = $service->execute($questionrequest); // Get the response into this useful object. $instance = $builder->newquestioninstance();

9 Maths for More 2016 WIRIS quizzes integration guide Page 9 of 13?> $instance->update($response); // Ask for the correctness of the 0th response. $correct = $instance->isanswercorrect(0); echo $correct; Validate the student answer with a custom algorithm You can benefit from the whole power of WIRIS cas for validate answers. For example, you could request to the student to input a polynomial that has a given list of roots. Thus, you need a way to verify that a certain polynomial has the required roots. Visit and press the new window press the variable tab and write the following program: icon. With the Go back to Validation tab and set Grading function with value test.

10 Maths for More 2016 WIRIS quizzes integration guide Page 10 of 13 Press Shift+Ctrl+Q to get the question descriptor and save it into degree2.xml The program would be <?php require_once 'quizzes/quizzes.php'; $correctanswer = "{-1,1}"; $studentanswer = "1-x^2"; $builder = com_wiris_quizzes_api_quizzesbuilder::getinstance();?> // Read question $filename = dirname( FILE ). '/degree2.xml'; $requeststr = file_get_contents($filename); $question = $builder->readquestion($requeststr); // Create question request $questionrequest = $builder->newevalrequest($correctanswer, $studentanswer,$question,null); // Send the xml request data $service = $builder->getquizzesservice(); // Call the web service $response = $service->execute($questionrequest); // Get the response into this useful object. $instance = $builder->newquestioninstance(); $instance->update($response); // Ask for the correctness of the 0th response. $correct = $instance->isanswercorrect(0); echo $correct; Note that the $correctanswer is not the proper correct answer but the list of roots.

11 Maths for More 2016 WIRIS quizzes integration guide Page 11 of 13 Change input symbols: working with physics units This section is related to physics units but is also interesting for understanding how to enable or disable some symbols using the following WIRIS quizzes studio sections from Validation tab and WIRIS quizzes needs to be notified when working with physics units. The underlying reason is that it needs recognize km as kilometer instead of the multiplication of the two variables k and m. Open WIRIS quizzes studio as explained previously and select Quantity. Press Ctrl+Shift+Q and get the question XML and save it to quantity.xml <?php require_once 'quizzes/quizzes.php'; $correctanswer = "1000m"; $studentanswer = "1km"; $builder = com_wiris_quizzes_api_quizzesbuilder::getinstance(); // Read question $filename = dirname( FILE ). '/quantity.xml'; $requeststr = file_get_contents($filename); $question = $builder->readquestion($requeststr); // Create question request $questionrequest = $builder->newevalrequest($correctanswer, $studentanswer,$question,null); // Send the xml request data $service = $builder->getquizzesservice(); // Call the web service $response = $service->execute($questionrequest); // Get the response into this useful object.

12 Maths for More 2016 WIRIS quizzes integration guide Page 12 of 13?> $instance = $builder->newquestioninstance(); $instance->update($response); // Ask for the correctness of the 0th response. $correct = $instance->isanswercorrect(0); echo $correct; Allowing physical units in WIRIS editor If you want to use WIRIS editor with physical units you will need to enable them. Create the file editor2.html and write the following <!DOCTYPE html> <html> <head> <script src= " ></script> <script> function displayeditor() { // Get WIRIS quizzes User Interface Builder. var builder = com.wiris.quizzes.api.quizzesbuilder.getinstance(); var question = builder.readquestion('<question> </question>'); var uibuilder = builder.getquizzesuibuilder(); // Build student's answer field. answerfield = uibuilder.newanswerfield(question, null, 0); var answercontainer = document.getelementbyid("studentanswer"); answercontainer.replacechild(answerfield.getelement(), answercontainer.firstchild); } window.onload=displayeditor; </script> </head> <body> <!-- This input will be replaced by a WIRIS editor. --> <div style="width:500px;height:200px" id="studentanswer"><span></span></div> <br> <input type="button" value="get MathML" onclick="alert(answerfield.getvalue())"/> </body> </html> Note that some lines, in blue, are shortened with three dots ( ). The value passed to readquestion is the question XML:

13 Maths for More 2016 WIRIS quizzes integration guide Page 13 of 13 Now, WIRIS editor recognizes the units and displays them in blue. Integrating WIRIS quizzes studio in your own platform WIRIS quizzes studio is designed to be easily integrated in any web platform. You can follow the getting started demos called level 2 and level 3. Another benefit on a depth integration of WIRIS quizzes studio is that you have the option to generate random questions.