Highlight differences in expected and student result

[sravanareddy]

Identify and highlight differences between outputs.

[bpw]

Some potentially helpful code, used for output diffing on cs111 ps01 code feedback before @fturbak added raw_input support to otter inspect. This will work until dealing with unordered output where structural checks (and highlighting) are needed.

https://docs.python.org/2/library/difflib.html

difflib.HtmlDiff().make_table(student_output, expected_output, fromdesc="Your output", todesc="Expected output")

Add a little CSS to do highlighting for:

.diff_add
.diff_sub
.diff_chg

e.g.:

.diff {
background: #eee;
border: 1px solid #ccc;
}
/* Output diff checking */
.diff td {
background: #f8f8f8;
font-family: monospace;
padding: 0em 0.2em;
border-color: #ccc;
}
.diff th {
padding: 0.25em;
}

.diff_sub {
color: #d70;
background: #fed;
border: 1px solid;
margin: 0px -1px;
padding: -1px 0px;
font-weight: bold;
font-family: monospace;
/* text-decoration: line-through; */
}
.diff_add {
color: #428;
background: #edf;
border: 1px solid;
margin: 0px -1px;
padding: -1px 0px;
font-weight: bold;
font-family: monospace;
/* text-decoration: overline; */
}
.diff_chg {
color: #833;
background: #fdd;
border: 1px solid;
margin: 0px -1px;
padding: -1px 0px;
font-weight: bold;
font-family: monospace;
/* text-decoration: underline; */
}