WeBWorK Main Forum

Web *FORMS* to write custom problems instead of alternate languages like Python...

Web *FORMS* to write custom problems instead of alternate languages like Python...

by Christian Seberino -
Number of replies: 19
I started a thread recently about possibility of using Python for writing problem sets. After thinking more about it and trying to make a problem set that hid as much Perl as possible, I came up with this. (See below).

Notice that a user just has to edit the variables at the top and never edit below the "Do not edit below this line.". Little to no perl needed.

This got me thinking....the next logical step is to simply enter these variable values in a web form! If Webwork had a web form to create custom problems wouldn't that make everyone happy that was clamoring for their own pet language to be supported by WebWork? A web form is essentially language neutral and has no Perl.

Thoughts?

Chris



$answer_value = 6;
$answer_units = "m/s";
$answer_format = "";
$answer_percent_tolerance = 20;
$question = <<QUESTION_END;
Push the file cabinet with a constant acceleration of 2 m / s\(^2\) for
3 seconds.
$BR
By how much did the velocity change during those three seconds?
(Remember to add the correct units to your answer.)
QUESTION_END

## ==========================================================
## ==========================================================
## Do not edit below this line.
## ==========================================================
## ==========================================================

DOCUMENT();
loadMacros("PG.pl",
"PGbasicmacros.pl",
"PGauxiliaryFunctions.pl",
"PGchoicemacros.pl",
"PGanswermacros.pl",
"PGgraphmacros.pl",
"PG_CAPAmacros.pl");
## ----------------------------------------------------------------------------

TEXT(beginproblem());
CAPA_import("${CAPA_Tools}Problem");

TEXT(CAPA_EV(<<'END_OF_TEXT'));
$question
END_OF_TEXT

## ----------------------------------------------------------------------------

TEXT("$BR", ans_rule(30), "$BR");
ANS(CAPA_ans($answer_value,
"unit" => $answer_units,
"format" => $answer_format,
"sig" => "3 PLUS 13",
"reltol" => $answer_percent_tolerance,
"wgt" => $prob_val,
"tries" => $prob_try));
TEXT(CAPA_EV(<<'END_OF_TEXT'));
END_OF_TEXT

## ----------------------------------------------------------------------------
ENDDOCUMENT();

In reply to Christian Seberino

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by D. Brian Walton -
Personally, I find that static problems like this do not capture the real value of a system like WeBWorK and would never use them. At the same time, I recognize that I am a bleeding edge kind of technology user. Some instructors may want to quickly throw together a particular problem and add it to their problem set that is already using WeBWorK and the PG language trappings may scare them away, in spite of the fact that the templates are easy (for those of us who do) to modify. I think what Chris is getting at is that there could be a version of problem authoring that hides NEARLY ALL of the coding aspect and could make the introduction even more painless.

Here is an extension of Chris's idea. I had started a thread some time in the past where I wish that problems could have problem-set level parameters. In other words, the problem could be written in a general way, and when the problem is added to the problem set, the instructor gets to specify the key parameters for the problem. The same problem could even be added multiple times with different parameters.

I say this, because I have several times written problems that are so similar to one another, that it is just a shame that I have to create multiple versions just to change the level of complexity.

Chris's proposal could be a version of this, where the "parameters" might even include the actual problem statement. It might even be possible to allow some randomization by including parameters specifying limits of a random parameter. The problem description could be in a file, and the corresponding template would ask for the file as an input parameter.

- Brian

In reply to D. Brian Walton

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Christian Seberino -
Brian

Thanks for your input. As a Webwork beginner, I'm curious what features you use that can't be captured in a "static file" such as mine. Are there lots of awesome features I should know about that I'm not using? What are your favorites?

cs
In reply to Christian Seberino

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by D. Brian Walton -
Here is an example of how I would have done your example problem. The key features that I include here are
(1) Randomized problems, where each assigned student has a problem that is generated using a randomly chosen key value, reducing the risk that different students see the identical problem.
(2) Rerandomization -- once the student gets the correct answer, they can request new versions to augment their practice.
(3) MathObjects -- The NumberWithUnits object takes care of the units automatically (although I noticed that unlike many MathObjects, you can not simply multiply two NumberWithUnits objects together since the answer inherits the first operand rather than computing the proper new units). Notice how simple the answer checker is. Also, the use of "texStrings" for the problem and solution display allows the MathObjects to automatically generate "pretty" mathematical notation formatting.
(4) Solutions -- Students can view a solution that also includes the randomly chosen aspects of the problem.

Not illustrated here are some of the computational issues that MathObjects allow, including automatic differentiation, a variety of reduction rules, and a fair amount of available restrictions on what simplifications the student is expected to do with an answer.


############### SAMPLE PROBLEM ################
DOCUMENT();

loadMacros(
"PGstandard.pl",
"parserNumberWithUnits.pl",
"problemRandomize.pl",
);

####
# Allow a student to ask for a new version once they get it right.
####
$pr = ProblemRandomize( 'onlyAfterDue'=>0 );

####
# Define the quantities with units.
####

# Acceleration will be between 2 and 5 on an increment of 0.2.
$a = random(2,5,0.2);
$accel = NumberWithUnits("$a m/s^2");

# Time will be between 2 and 5 but always an integer.
$t = random(2,5);
$time = NumberWithUnits("$t s");

# Randomly choose the object to move.
@objects = ("a file cabinet", "an office safe", "an anvil", "a bookshelf");
$heavyObject = $objects[random(0,3)];

####
# Define the answer as an object with units automatically
####
$deltaVelocity = NumberWithUnits("$a*$t m/s");

### I was hoping I could use the following line
### but units are not treated properly now
# $deltaVelocity = $accel * $time;

####
# Display the Problem
####
TEXT(beginproblem());
Context()->texStrings;
BEGIN_TEXT
$PAR
Push $heavyObject with a constant acceleration of \($accel\) for a \($time\)
time interval. By how much did the velocity change?
$BR $BR
Velocity change: \{ans_rule(15)\} (Remember to include the correct units to your answer.)
END_TEXT
Context()->normalStrings;
###
# Check the Answer
###
ANS( $deltaVelocity->cmp );

###
# Give the student a custom solution.
###
Context()->texStrings;
BEGIN_SOLUTION
$PAR $BBOLD Solution: $EBOLD

$PAR
Because acceleration is the rate of change of a velocity and is constant during
the \($time\) interval, the change in velocity is simply the product of
acceleration times the length of time interval, \(\Delta v = a \cdot \Delta t = ($accel)($time) = $deltaVelocity\).
END_SOLUTION
Context()->normalStrings;

ENDDOCUMENT();
In reply to D. Brian Walton

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Christian Seberino -
Brian

I noticed you have ANS( $deltaVelocity->cmp ); line. Are you aware that with PGML you don't need to specify such a line? I believe the answer is checked automatically. Not sure why everyone doesn't use PGML.

cs
In reply to D. Brian Walton

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Michael Gage -
Let me add my 5 cents to the discussion:

1. The coding style that Davide Cervone made popular using MathObjects with the sections:  Setup, Text, Answers and Solution  make it possible in a well written problem to change a few parameters in the Setup section and presto a new problem.  It's why I have adopted that style.  Originally, particularly in multi-step problems, I mixed the four parts together which made it more organic to write, but much less easy to maintain.

2. Everyone interested in simplifying input (and retaining good flexibility) should look through all of the PGML examples on Davide Cervone's course.
Other places to learn about PGML are PGML sample problem and PGML Lab.

3. This paper about work at Worcester PolyTech Institute just came to my attention.  It looks pretty similar to the kind of form input you were thinking about. Facilitating WeBWorK problem authoring.   (There are a few more student projects on WeBWorK coming from WPI which are listed in the reference database. Way to go guys!!)

4. Adding a form front end is certainly doable, and it's not the first time it's come up.  Given a script that translates a webform into a PG problem it wouldn't be hard to plug it in as an additional editor. As a proof of concept construct a stand alone form that returns the text of a PG problem -- one could cut and paste that text into the standard PG editor window for testing purposes -- and once it's ready we can figure out how to automatically and transparently transfer the text from the form to the editor window.

5. For the current state of the art take a look at the work accomplished at WeBWorK::Rochester -- note the various versions of the classlist page, problem editors as well as the compound problem. (It looks good on an ipad too!!) BleedingEdge WeBWorK (use login/password   profa/profa to get in ). 

In reply to Michael Gage

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Michael Gage -
These references may be useful as well:
http://webwork.maa.org/wiki/EditorDesigns
and the docs on this page:  http://webwork.maa.org/moodle/course/view.php?id=6
In reply to Michael Gage

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Christian Seberino -
Michael

1 comment and 1 question..

(*) I contacted the advisor of that Worcester Poly Tech project and read their final report. They did their UI in Java and the advisor said it was determined to be too difficult to integrate with Webwork. I'm not sure why they didn't just use vanilla HTML and maybe some Javascript.

(*) You mentioned the HTML UI proof of concept. I can code up a vanilla HTML form with some Perl code if someone else can add whatever thin glue layer is needed to integrate with your web framework. Can I write this in Python or must it be in Perl?

So in addition to the HTML form we need a form action function that:

1. Accepts values from the web form.
2. Emits PGML code.

Right?

cs


In reply to Christian Seberino

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Michael Gage -
I think you need to write the form action function in JavaScript or in perl. JavaScript would give more modularity so that might be better. Their java app works pretty well for cut and paste. Integrating java or python applet would probably be more trouble than it's worth
In reply to Michael Gage

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Christian Seberino -
All the forms I've ever written have run code on the server after the Submit button was pressed and the date sent from client to server.

What do you mean by a Javascript action function? Would this run on the server? If not how will the data get to the server to be saved? Sorry if this is a dumb question but I didn't know Javascript could be run on the server if that is the intention.

cs
In reply to Christian Seberino

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Michael Gage -
The javaScript just runs on the client.  I don't think I know exactly how this would be done but here are some ideas and pointers to get started.

Begin by serving a page that has a form in it (like the form used by the WPI guys) and a text area box (like the text area box that one uses in the PG probem editor).  Attach a javaScript to the onSubmit action that instead of verifying the form, collects all of the data in the form,  formats it as you wish, and places it in the textarea box. There are probably hundreds of examples but here is one I found:

http://www.mcli.dist.maricopa.edu/tut/tut28c.html

The form action can just be left blank I think -- since after "verifying" the form with javaScript we never actually submit it -- we just use the side effect that a PG problem version of the form has been placed in the textArea box on the webpage.

Once that is working properly (and since there are many ways to do this it might take a while to figure out the best one -- javaScript and UI experts please chime in) one can add a button so that the form is initially hidden and when the button is pushed javaScript creates an overlay window with the form.   Using jquery would probably be a good idea here since that will take care of many of the headaches involved with making javascript run on all browsers.    Here is a collection of examples that might help:

http://www.techflaps.com/2012/02/jquery-or-javascript-dialog-boxes

Again it will take a while (or at least it would take me a while) to determine the best way to do this cleanly.  

Finally once everything is working smoothly on a regular served webpage we just add the javaScript and the button to the PG problem editor page and you have an overlay form that can be used to create PG problems.  The last step is probably pretty easy once everything else is working.

The WPI folks have already set up a good model of what the input and output could look like so there are examples to follow for nearly everything in this project.  It will be interesting to see what it looks like when it's done. I think it will be a useful addition to WeBWorK.

-- Mike

In reply to Michael Gage

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Christian Seberino -
Mike

I like your idea of adding a Javascript/JQuery component to an existing Webwork page.

You mentioned adding the new Javascript client code to the PG problem editor page. What I'm confused about is that the PG problem editor page is used to edit EXISTING problems. Don't we really need a webpage that is used to create NEW problems? If Webwork has such a webpage I'm not aware of it.

Please advise.

Sincerely,

Chris


In reply to Christian Seberino

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Michael Gage -
The PG editor will create new problems as well -- just use the "save as" feature
to save your changes as a new problem.  You can choose to have it replace the old problem in the set or you can add it on as a new problem in the set. (You 
can even just save it as a file which is not connected to any set.)

Most new problems start with some template -- often the default "blankproblem.pg".  You can create several blank problems in a set using
the entries at the bottom of the HomeworkEditor page.

http://webwork.maa.org/wiki/Problem_Set_Detail  The documentation on creating new problems is rather brief however-- it could use some work.
In reply to Christian Seberino

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Michael Gage -
Yes.  This is exactly what I had in mind.  Let me see if I can add some of this javaScript to an existing editor and you will have "proof of concept" prototype.

-- Mike
In reply to Michael Gage

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Christian Seberino -
Mike

Great! Glad you liked it. You'll notice all my new code is between 2 comments...

<!-- ******** Begining of New Component ******** -->

and

<!-- ******** End of New Component ******** -->

How do you suggest we iterate on this prototype moving forward? Perhaps we should create a branch on whatever source control system Webwork uses? Another idea I had to promote good encapsulation is that we can put all this Javascript code in a separate file and just load it with a script element. That way I don't need to keep touching your editor page. Tell me what you prefer since you're the boss.

Sincerely,

Chris
In reply to Christian Seberino

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Michael Gage -
Here is the latest iteration of this input form.

I've used jquery and twitter bootstrap libraries to make the form
a modal one that pops up when you push the button.

I'm not an expert with either of these libraries (or with 
javaScript for that matter) so there are undoubtedly improvements that can be made.

I would like to figure out the best way to include these in the PGproblemeditor
in a way which makes it easy to add, modify the input forms themselves.

-- Mike
In reply to Michael Gage

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Christian Seberino -
The best way I can think of to include this new form code in the PGproblemeditor is to put all the Javascript code into a separate file and load it from there. Then we can put it under version control and iterate on it as long as we want without changing anything else.

Can you do that? What do you think?

So in other words....if you store it in say /path/to/jquery_form.js, then in the PGproblemeditor well just need to add the following:

<script type="text/javascript" src="/path/to/jquery_form.js"></script>




cs
In reply to Christian Seberino

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Douglas Young -
As a webwork newbie, I think this is a great idea.  I have been working on creating some college physics problems and this is basically what I have been doing (i.e. using another problem as a template to create new problems).  I have two suggestions:

1)  As someone who does not know perl, I found the m / s\(^2\) confusing.  I wrote this unit as \(m/s^2\) , with the idea that the unit was "contained" inside the \( unit \). This has the added benefit of putting the unit in italics making in more consistent with textbook problems.  Just a thought.

2)  I would be useful to have a way of putting figures into the problems.  This is the command line I used to insert the figure:

$PAR \{image("double_pulley-0a.png", width => 800, height => 400 )\}$PAR

Douglas Young
In reply to Douglas Young

Re: Web *FORMS* to write custom problems instead of alternate languages like Python...

by Michael Gage -
That's the correct method for inserting the image. That was advanced web 1.0 when it was written in 1997. :-)  Is there any chance that someone with javaScript chops could create a drag-and-drop method of adding an image to a page? That would be really awesome.  You could still use the syntax above behind the scenes to get the actual work done.

I didn't quite understand your comment on units -- perhaps you could point to an example?    I think that     32  ft/s^2  is perfectly acceptable, no parens required.  ( http://webwork.maa.org/wiki/Units )