How to grade HTML

How to grade HTML

by Andrew Elliott -
Number of replies: 3

I'm wanting to add the option to grade HTML 5 to coderunner on Moodle but I've got no idea how to do that. I was reading through a similar topic on this forum but it didn't make much sense to me. Would love to be pointed to a repo accomplishing this if possible!

In reply to Andrew Elliott

Re: How to grade HTML

by Richard Lobb -
I assume you're talking about this forum posting: https://coderunner.org.nz/mod/forum/discuss.php?d=404. That's a pretty advanced discussion, for gurus!

HTML doesn't really fit the usual "run the student code and check if the output is right" CodeRunner model. HTML isn't a programming language in the usual sense of the word. Normally in CodeRunner you ask questions like "Write a program that generates the following output", and the student program output can then be trivially checked for a match with the specified output. HTML, however, is a markup language which defines the appearance of a web document and it's very hard to check if the rendered HTML matches the desired result. As an analogy, if I ask someone to write the word "CAT", it's trivial to check if they get it right. But if I ask them to draw a picture of a CAT, there's no longer any definition of correctness. On top of that there's the behaviour aspects of a web document to assess, ranging from what HTTP action takes place on a form submission through to the unlimited complexity of JavaScripted interactivity.

That said, CodeRunner in principle lets you ask any question you like provided you, as question author, can write code to definitively say whether a student's answer is right or wrong. So, before I attempt to clarify or provide examples, can you tell me exactly what sort of questions you're hoping to ask, please? I'd like to see at least a couple of examples where you give me the wording of the question together with a definition of what constitutes a right answer. Then I'll be able to tell you whether CodeRunner is likely to be of use to you.
In reply to Richard Lobb

Re: How to grade HTML

by Andrew Elliott -
Hi Richard,

So we were mainly wanting to check if the user is able to identify accessibility issues and correct them.

For example:

What is missing from this code snippet?

<code>
<img src="" />
</code>

Where the user would then go in and add an alt tag.

Thats the sort of thing we're wanting to accomplish
In reply to Andrew Elliott

Re: How to grade HTML

by Richard Lobb -
Here's a question that does that, though it's only a quick proof of concept. You will undoubtedly wish to improve on the feedback. An xml export is attached. If you import that and look under Advanced Customisation you'll see that the template language is set to Python but the Ace language (which is what the student sees in the answer box) is HTML. The Python template code just parses the HTML and prints the tags and attributes found. 



And after a correct submission: