0

I'm developing a website with some simple HTML exercises (like the ones in Codeschool and Codacademy), and now I'm stuck at the correction phase, how can I compare two HTML strings and decide if the user has submitted a correct one?

For example, suppose we have the correct answer as:

<h1>Hello World</h1>
<h2>Welcome</h2>

and the user submitted:

<h 1>Hello World</ h1>
<h2>Welcome</h2>

or:

<h1> Hello World </h1></h1>
<h2>Welcome</h2>

The previous submits are considered correct in the websites I mentioned earlier, so how can I achieve such functionality in JavaScript?

Create DOM elements? Direct equivalence? Use simple regex to parse HTML strings? (I understand its hard as a CFG, but its achievable for simple, not nested HTML.) Or is there some testing frameworks for static HTML?

closed as off-topic by Philipp, Robert Harvey, Ixrec, user22815, gnat Jun 20 '16 at 6:09

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions asking for assistance in writing or debugging existing code are off-topic on Programmers. These questions can be asked on Stack Overflow if they include the desired behavior, a specific problem or error, and the shortest code necessary to reproduce it in the question itself. See How To Create a Minimal, Complete, and Verifiable Example." – Philipp, Robert Harvey, Ixrec, Community
If this question can be reworded to fit the rules in the help center, please edit the question.

  • here validator.w3.org you can find out if your html is compliant with the latest standards. – JoulinRouge Jun 7 '16 at 17:56
  • @JoulinRouge thx for your comment, actually I have specific criteria with the correct answer which I need the user to meet with his submitted input, like the example I've given, It might be that I ask the user to surround "Hello World" with the appropriate header tags... – Bassel Shmali Jun 7 '16 at 18:02
2

Essentially, the task is to parse the “right” answer and the answer given by the user. As a result, you will obtain two trees that can be compared.

If you're dealing with XHTML, any XML parser in any language will do the trick. If you need to validate HTML which may not necessarily be a valid XML document, then you'll probably need a third-party package which can parse the string and build the DOM from it.

The second step is to compare the two trees. Here, you need to know exactly what should be considered right or wrong. A wrong order of children? Possibly wrong. A wrong order of attributes? That doesn't matter. If you're too strict, the users will be angry at you (“Seriously?! I failed this exercise because I put Hello World!, while Hello, World! with a comma was expected?!”) If you're not strict enough, blatantly wrong answers would eventually be considered right, and users will blame you for teaching them the wrong stuff.

The hard part would be to validate exercises which:

  • Deal with specific parts of HTML syntax such as comments or CDATA,

  • Have multiple valid answers (although you shouldn't get too much of that in HTML; in CSS, on the other hand, a lot of problems can be solved using many different solutions),

  • Make it possible to take some freedom when writing HTML: for instance, if the exercise is to create a <dl> with the names of different species and their respective description, should it really change my understanding of this feature of HTML if I put an elephant and a horse in the list, instead of a cat and a dog?

    This last case is interesting by itself. You may barely validate the schema, while ignoring the actual content. The exercise itself could be something like:

    Using only three of the tags you've learned, how can you create a sequence containing three species and showing, for every specie, its name and a short, one-line description? You can't use <p>, <div> and <span>.

If the exercise app runs in a browser, you may want to simply insert the “right” answer and the answer given by the user in two hidden elements in the page, and then use JavaScript (jQuery would help a lot) to go through the elements and attributes. This will make it possible for the user to cheat, but it probably doesn't matter and users who are just learning HTML are possibly unaware of the capabilities of their favorite browser's debugging console.

use simple regex to parse HTML strings?

Forget about it.

Not the answer you're looking for? Browse other questions tagged or ask your own question.