Colin/output styles

[ColinFay]

This PR implements a new way to customize the outputs from both {learnr} and {gradethis} using exercise options.

[ColinFay]

Examples at:

• http://connect.thinkr.fr/learnr-colored-output/
• http://connect.thinkr.fr/learnr-colored-output-gradethis/

[ColinFay]

@trestletech @schloerke @dcossyleon

As of our last discussion, this is now the default behavior:

• Run Code always output the console
• If this output is an error, a colored square is shown
• Submit answer can use specific colors for the output, and the feedback and console output can be both turned off (default is display them both)

=> {learnr}: http://connect.thinkr.fr/learnr-colored-output/ => {gradethis}: http://connect.thinkr.fr/learnr-colored-output-gradethis/

[trestletech]

Looking good to me! @dcossyleon I can't remember where we netted out in the last meeting, but I notice that in the current demo learnr exercise syntax errors have their output highlighted in an alert background. I think that's helpful since we don't have the ability to print error text in right like we could in the IDE. But I remember you had reservations. Did we decide we did or did not want that?

[schloerke]

The code changes look great! Just a few minor changes left. 😄

[dcossyleon]

Looking good to me! @dcossyleon I can't remember where we netted out in the last meeting, but I notice that in the current demo learnr exercise syntax errors have their output highlighted in an alert background. I think that's helpful since we don't have the ability to print error text in right like we could in the IDE. But I remember you had reservations. Did we decide we did or did not want that?

Originally I had suggested that "Run Code" always give the standard black output, but I agree now that some sort of color indication of an error would indeed be helpful. The colored background feels too bulky for "Run Code" error output, but a nice compromise would be the suggestion of using the colored outline (see below).

This is subtle enough that the focus remains on the text in the error message, while still giving a color indication that something went awry. I think the colored background should be saved for gradethis cases only, where human feedback is also being shown and the student is expecting a "louder" indication of success or failure.

[dcossyleon]

For gradethis output styles:

Output that gets wrapped in <pre> tags, like the example, below looks great!

Could we apply the same spacing (and border removal) that separates the text and output for other output types (tables, images, plots, etc.)?

[ColinFay]

@dcossyleon this is implemented in the last commit:

[dcossyleon]

Looks great to me

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}