Answers, Themes and Essays, Oh My!

Hello everyone.  Geoff Goehle on Mike Gage's blog again.  Mike wanted us all to write a bit about what we got done at WeBWorK::Raleigh.  My time was split up between several different projects: adding comments to essay answers, modifying the Show Past Answers page to be suitable to students, and creating the math4 theme. I will talk about  each after the break.

Comments on Essay Answers

One of the most requested features for essay questions is the ability for instructors to comment on student answers and so we decided to add this ability to the system.  If you go to the grader page for an essay problem (links to which can now be found by clicking on the set name in the main set list page) you will see the following

As before instructors can mark problems correct, or set the score manually.  Now you can also add a comment to each answer by typing in the left hand box.  You can use LaTeX formatting in your comment using \( and \) and clicking on Preview will show you a formatted version of your comment using MathJax.  Once the grades are saved the student will be able to see your comment if they revisit the original problem page as we see here.

An additional feature is that students can input formatted mathematics using back-ticks ( ` ) as seen in the text box above.  This uses the EV3P processor to format the equations. 

Note:  If you grade students answers before the submission period is complete then your comment will disappear if the student submits a new answer.  This is intentional since each comment is attached to a specific answer.  Students can still see old comments by viewing past answers. 

 Past Answers

There is now the ability to let students to use the "Show Past Answer" functionality.  This can be enabled by setting $permissionLevels{view_answers} = 'student'; in course.conf or localOverrides.conf.  Show Past Answers behaves slightly differently for students.  The two big changes are that they cannot view answers from other students and the answers are no longer colored according to correctness.  The Show Past Answer functionality remains the same for professors (or any one with access to the instructor tools).  

Math4 Theme

The math4 theme basically gives the current WeBWorK interface a bit of a spit shine.  All of the navigation elements are in the same place, but the Twitter Bootstrap css/js scheme has been integrated to give everything a little more style. 

One of the most interesting aspects of this, especially for those of you thinking about creating your own themes, is that this was (very nearly) all done by editing just those files in htdocs/themes/math4.  In particular, clever use of javascript can accomplish a great deal in terms of changing the look of WeBWorK.  For example, lets do a before and after.  Here is the homework sets editor (with the new bootstrap based tabbing menu)

Now we will make several changes.  First we will get a new bootstrap theme (superhero) from Bootswatch and put the bootstrap.css file in the /htdocs/themes/math4 folder.  Now we change system.template to use the new bootstrap file using the line 

<link rel="stylesheet" type="text/css" href="<!--#url type="webwork" name="htdocs"-->/themes/math4/bootstrap.css"/>

Next, we have to go into the math.css file and remove or change all of the existing background colors so that the new Bootstrap colors will shine through.  For example we have to remove background:white from .body.  Finally, lets change the table style to add stripes and borders.  We do this by adding classes using jQuery in the math4.js file via the line

$('.set_table').addClass('small-table-text table table-condensed table-striped table-bordered');

After doing some other tweaks and modifications this is the end result.

There are a great many things that can be done using javascript.  We can dynamically modify the class (and consequently the format) of an object based on its contents.  For example, the code

 if($('.problem_set_table th:contains("Test Score")').length > 0) {$('.problem_set_table').addClass('small-table-text'); }

will  cause the Homework Set list to have smaller text in the table when there is a Test Score column (i.e. when there is a gateway set assigned).  We can also use javascript to replace html elements we don't like without modifying the underlying perl modules.  For example, the code

$('td a:has(img[src$="edit.gif"])').each(function () { $(this).html($(this).html().replace(/<img.*>/," <i class='icon-pencil'></i>")); });

replaces all of the pencil gifs in with a cleaner pencil icon.  The sky really is the limit here, but the price is doing lots of javascript.