Question Authors' Forum

HTML CSS Javascript

 
Picture of Sam Suresh
HTML CSS Javascript
by Sam Suresh - Thursday, 7 July 2016, 2:26 PM
 

Hello Richard Lobb,


Thank you for coderunner!

I teach HTML CSS , Javascript and PHP. Would like to use coderunner to test student input.

I have some basic questions;

I want students to write Javascript to given scenario.
Then code runner to test and feedback. Also possible to display the output?

For example this one.

In the 3rd column, it display the output.

Thank you for your time.

Picture of Richard Lobb
Re: HTML CSS Javascript
by Richard Lobb - Friday, 8 July 2016, 9:08 PM
 

Hi Sam

I'm not quite sure how to fit your example into a CodeRunner context. For a CodeRunner programming question you need:

  1. A clear question spec, which asks the student to write some code that performs in some well specified way. 
  2. A way to grade the student's response with a program, which usually incorporates the student's answer, checking to see if it behaves as expected.
Since CodeRunner tests code on a headless server, you can't test GUI behaviour directly. Instead, you must build your own mock-ups of the GUI elements you wish the students to use, and incorporate those into the question template (usually within your own new question type). Even for simple GUI exercises this isn't trivial. However, here's a very simple example - you can decide whether you wish to proceed further.



This is a nodejs question, with the following template:

var inputActionString = "{{ TEST.stdin | e("js") }}";
var inputActions = inputActionString.toLowerCase().trim().split('\n');
var iAction = 0;

function nextUserAction()
{
    var action = null;
    if (iAction >= inputActions.length) {
        console.log("No user action defined!");
    } else {
        action = inputActions[iAction++];
        console.log("User action: " + action)
    }
    return action;
}


function alert(message)
{
    var action;
    console.log("Alert: " + message);
    action = nextUserAction();
    if (action !== 'click ok') {
        console.log('User action ' + action + " can't be applied to an alert");
    }
    return true;
}
    

function confirm(message)
{
    var action;
    console.log("Confirm: " + message);
    action = nextUserAction()
    if (action === 'click ok') {
        return true;
    } else if (action == 'click cancel')  {
        return false;
    } else if (action !== null) {
        console.log('Illegal user action: ' + action);
        return false;
    }
}

{{STUDENT_ANSWER}}

The standard input field of the testcase is used to supply a sequence of user actions. The two expected GUI components, alert and confirm are both mocks, which write a message to the console log when called. The correctness of console log output is used to verify the behaviour of the student's code.

I attach a Moodle/XML export of that question, but you should realise that this approach doesn't scale to more advanced GUI programs which use much in the way of HTML elements, as you are then faced with the near-impossible task of building a mock of the complete HTML DOM behaviour. Automated testing of HTML/JavaScript programs is a fundamentally hard problem.

Richard


Picture of Sam Suresh
Re: HTML CSS Javascript
by Sam Suresh - Saturday, 9 July 2016, 2:31 AM
 

Hi Richard!

Thank you for the detailed answer.

I understand how it works now.

However I find showing the output to students will give them a very clear understanding on what they are coding. Something like this: https://repl.it/CaAp.

Coderunner is almost there and I see it was created to solve more complex questions and automate test. However it can't output the code browser side (something like this when you click run https://repl.it/CaAp).

Thanks anyway.



Picture of Richard Lobb
Re: HTML CSS Javascript
by Richard Lobb - Saturday, 9 July 2016, 5:55 PM
 

Hi Sam

Yes, it sounds like you are after a web-based development environment for students. CodeRunner is intended primarily for testing and grading code that students have already written in their development environment.

Thanks for the interest and for generating an interesting thread, anyway.

Richard

Picture of Sam Suresh
Re: HTML CSS Javascript
by Sam Suresh - Friday, 22 July 2016, 4:29 PM
 

Hi Richard,

I'm trying to playing around with your XML file. I got this error "qtype_coderunner/Failed to find prototype nodejs"  Am I missing anything?


Thanks


Picture of Richard Lobb
Re: HTML CSS Javascript
by Richard Lobb - Saturday, 23 July 2016, 10:00 AM
 

Yes, sorry Sam. I should have warned you that you need to have the nodejs question type installed first. To do that, just do a question-bank import of the Moodle XML file db/uoc_prototypes.xml (you'll need to be a Moodle administrator to do that).

I've just moved that question type to the built-in prototypes file, so it will be standard from now on (next time I push).

Richard

Picture of Ismael Figueroa
Re: HTML CSS Javascript
by Ismael Figueroa - Saturday, 9 July 2016, 4:39 AM
 

Similar to Richard's suggestion, I've been successful in using jsdom with the chai testing framework, in order to mock the HTML+JS DOM and create useful tests. I attach a sample question template, which corresponds to one of the W3Schools questions (http://www.w3schools.com/js/exercise.asp?filename=exercise_assignment1)


var jsdom = require("jsdom");
var chai = require("chai");
var should = chai.should();
var expect = chai.expect
var assert = chai.assert;

var __student_verbatim_answer__ = `
{{STUDENT_ANSWER}}
`;

var __student_answer__ = `
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p> 

<script>
var x = 10;

{{STUDENT_ANSWER}}

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>
`;

var result = {};

{% if TEST.extra %}
var testExtra = {{TEST.extra}};
if (testExtra.hasOwnProperty("testname")) {
    result.testname = testExtra.testname;
}
{% else %}
result.testname = "{{TEST.testcode | e('js')}}";
{% endif %}

jsdom.env(__student_answer__, [], function (err, oldWindow) {
    jsdom.env({
       html: __student_answer__
        , features: {
            ProcessExternalResources: ['script']
        }        
        , onload: function(window) {
            scripts = window.document.getElementsByTagName("script");
            for (var i=0;i<scripts.length;i++) {
                if (scripts[i].src) console.log(i,scripts[i].src)
                else console.log(i,scripts[i].innerHTML)
            }
        }        
        , done: function (err, window) {
            try {
                {{TEST.testcode}};
                result.fraction = 1;
            } catch(testErr) {
                result.fraction = 0;
                result.got = testErr.message;
            }
            console.log(JSON.stringify(result));
        }
    });
});

Notice you have access to the oldWindow and the window object, representing before and after student code execution. As for the tests, for this particular question I have attached the test cases as images.

I'm sorry I don't have much more time to ellaborate on this, but please be in touch if you are interested, as we could create a common pool of HTML-related questions.

Cheers


 







Picture of Richard Lobb
Re: HTML CSS Javascript
by Richard Lobb - Saturday, 9 July 2016, 6:00 PM
 

Wow, this looks like a great question type, Ismael! I look forward to having a play with it when I have some spare time.

I'm not currently teaching any web/javascript courses, but it's possible I will be doing so next year. If that happens, you can expect to hear back from me :)  What level of course are you teaching, i.e. introductory programming or more advanced web development?

If anyone is interested I'm happy to set up a Javascript/HTML question repository "course" on this server, as I did recently for C, allowing uploading and downloading of questions to a question bank that only teachers can access.

Thanks for the contribution, Ismael

Richard