## WeBWorK Problems

### Draggable proofs

by Peter Selinger -
Number of replies: 22
I found the draggable proofs macros here:

https://github.com/openwebwork/webwork-open-problem-library/blob/master/OpenProblemLibrary/macros/MC/draggableProof.pl

Is there a newer version? One problem with this version is that when the student comes back to the problem, it has memorized the previous answer, but it *also* puts a full set of tiles in the left column, so that there are duplicate tiles (see attached screen shot). This doesn't seem to affect the grading (replacing any correct tile by its duplicate still seems to be a correct answer), but it could be confusing.

Second question: is it possible to have custom answer checkers for draggable proofs? I am imagining situations where the answer is not unique (for example, in a case distinction, the cases could be done in any order. Or if there are several assumptions at the beginning of the proof, they could be stated in any order).

Thanks, -- Peter

### Re: Draggable proofs

by Michael Gage -
Hi Peter,

If you have one that compiles without giving a red warning message at the top then you have the latest version. (If not try updating the OPL to get the new MC/draggableProofs.pl file).

The javaScript bug of not erasing the tiles on the left is a known bug, but as far as I can tell no one has fixed it yet. It might not be hard to fix. Probably an initialization is missed somewhere. I haven't had a chance to look at it.

I'm sure that there are many additions that can be made to this macro file including customized answer evaluators. (You can copy the MC/draggableProofs.pl file to your own macro directory myCourse/templates/macros and safely experiment without affecting other courses.)

-- Mike

### Re: Draggable proofs

by Peter Selinger -
Hi Mike,

thanks, I will look into it. It seems to be a complex combination of CSS, JavaScript, Perl, and Webwork. I will do my best to find the bug but it looks daunting!

Meanwhile, I noticed here

https://johnny.github.io/jquery-sortable/

that there is a version of jquery-sortable (which I assume the draggableProofs macros rely on) that uses a little triangle as a marker for where the tile is going to be dropped. It also has a "dragged" CSS property that allows the macro author to give the tile a different style (for example, slightly transparent) while it is being dragged. The version that is in WebWork does not seem to have these features.

Would this simply be a matter of switching to a newer version of jquery? Or could it break lots of other things. Just curious. The little triangle would be very nice to have, because it is often a bit finicky to get the tile to drop in the intended location.

-- Peter

### Re: Draggable proofs

by tim Payer -
Yes Peter,

I hope you have some success with debugging the draggable proofs.
I have been wanting to use the feature for some time but can't with its current bug. The draggable proof problems needs an automatic "refresh" with each successive attempt. Without a refresh the chosen word snippets are duplicated in the original column.

I wish I had more expertise to offer....:(

### Re: Draggable proofs

by Peter Selinger -
Success! The attached patch fixes the bug in draggableProof.pl.

To summarize what went wrong:

When the user presses "Preview My Answers", "Check Answers", or "Submit Answers", the properties $main::inputs_ref->AnSwEr0001 and$main::inputs_ref->AnSwEr0001-src are both set to the previous state of the right and left column, respectively, and everything works fine.

When the user moves to a different problem and later returns, only the property $main::inputs_ref->AnSwEr0001 is set. Apparently the property$main::inputs_ref->AnSwEr0001-src is not preserved once the user leaves the problem. In this case, the old behavior was to populate the left column with all tiles (including duplicates of ones that already occurred in the right column). This behavior was incorrect.

The obvious solution is to compute the left column as the complement of the right column, in case $main::inputs_ref->AnSwEr0001-src is not set. The only disadvantage is that when the user leaves and returns to the problem, the tiles in the left column will no longer be in the order in which the user had arranged them. They will be shown in their initial (randomized) order. However, this should not be a big deal since these tiles are "unused" and the order should not matter to the user. (The ordering is still preserved as long as the student doesn't leave the problem). -- Peter In reply to Peter Selinger ### Re: Draggable proofs by Peter Selinger - P.S.: I also updated the Wiki here: webwork.maa.org/wiki/DraggableProofs, because it contained outdated instructions on where the find the macro file. In reply to Peter Selinger ### Re: Draggable proofs by tim Payer - Thank You Peter! I look forward to trying out the corrected version. Though I am assuming that maa subscribers will have to wait until this Fall, I am still pleased. Thanks for the extra effort... Tim In reply to tim Payer ### Re: Draggable proofs by Danny Glin - As an MAA subscriber, you should still be able to download the updated macro file, and put it in the macros/ directory of your course using the file manager. In reply to Peter Selinger ### Re: Draggable proofs by Peter Selinger - Here is another patch for draggableProof.pl. Background: I assigned two draggable proof problems to my class today. It transpired within seconds that the problems did not work on touch screen devices (only computers with an actual mouse worked). Fix: replace the non-existing URL "$courseHtmlUrl/js/jquery.ui.touch-punch.min.js" by ""/webwork2_files/js/vendor/jquery/modules/jquery.ui.touch-punch.js", which seems to be the actual location of the relevant script.

Now it works on all devices.

-- Peter

### Re: Draggable proofs

by Peter Selinger -
I've created an improved version of the draggableProof package, using a better jQuery library for dragging. The new version works great and has the following features:

* During dragging, there's a placeholder list item, so that it is easier to see where the tile will be dropped.

* During dragging, the dragged tile is made slightly transparent, so that one can see what is underneath.

* During dragging, the screen scrolls if the tile reaches the edge of the viewport (this was also true for the old version of the package, but not for every draggable JavaScript library one can find on the internet).

* It also works with touch screens (this was conditionally true for the old version of the package).

* It is completely compatible with the previous draggableProof package from the problem author's point of view.

The file draggableProof.pg is attached and can go in the course-local folder templates/macros. The jQuery plugin jquery.nestable.js from https://github.com/RamonSmit/Nestable2 is also required,
and should go in the course-local folder html/js. I have put all the required files, and some demos, at this website:

This version of the package is ready for use and I am using it in a course right now. I hope that it can eventually become part of the standard WebWorK macros, so that one can add draggable proof problems to the OPL.

### Re: Draggable proofs

by tim Payer -
Thank you Peter,

Unfortunately we were unsuccessful.

Thanks for making this a work feature in WeBWorK!

Tim

### Re: Draggable proofs

by Michael Gage -
This is great Peter. Thanks very much.

The way we incorporate new code into WeBWorK is to create a pull request to github.com/openwebwork (in this case github.com/openwebwork/pg since you are modifying the pg directory code) from your own github.com site.

This process makes the WeBWorK changes public, letting people know who gets credit for the changes, and also allowing time for a review before committing the new code to the existing repository (repos).

The pull request should be to the "develop" branch and there are directions starting here:
https://github.com/openwebwork/webwork2/wiki/Coding-and-Workflow
and proceeding to further directions on the github wiki.

(You should also submit a pull request to the webwork2 directory, develop branch, to include the jquery.nestable.js file in webwork2/htdocs/js

Would you like to submit your own pull request to have your draggable proof code incorporated into PG? If you would rather not read about the pull request process right now I can submit the pull request for you.

Once the pull request is reviewed and pulled into the develop branch anyone using the updated develop branch will be able to use your new draggable macro file. Eventually (probably in May) the develop branch will become the new master branch and anyone with an updated WeBWorK system will be able to use it.

Meantime those in a hurry, or those without access to the command line of their WeBWorK site, can use your new feature immediately as you describe above. Use FileManager to upload files.

Again, thanks very much for creating this new macro file and sharing it. We need more active developers in the WeBWorK community!

-- Mike

### Re: Draggable proofs

by John Travis -
Thanks so much for updating this macro. This was something that we wanted to look at but no one had time. The loss of touch screen capability was frustrating but fixing the duplicates (which never happened when this was first created) is a critical fix.

I'll download your new file right away and test it out with my class this spring. We are just getting to my problems with draggables and hopefully this will be just what is needed.

JT

### Re: Draggable proofs

by John Travis -
Ouch. Just downloaded and tried using 2.12 (pg and ww) and it doesn't work at all. Is there something in this that requires 2.13?

### Re: Draggable proofs

by Peter Selinger -
I no longer have a working 2.12 system, so I am trying to install one from scratch now. Incidentally, where are the most up-to-date installation instructions? The site "http://webwork.maa.org/wiki/Get_WeBWorK" has no current "installation guide", it has only "old installation guides". I am trying to follow the old instructions. If I get a 2.12 system working, I might be able to find out what is wrong with the package. I will report.

### Re: Draggable proofs

by Sean Fitzpatrick -
I've been following this thread because we have some colleagues who might like this for an introduction to proofs class. We had a question:

Can you only arrange tiles horizontally, or can they be arranged in both rows and columns. One of our colleagues likes to do two-column proofs in the context of formal first-order symbolic logic.

Could one have one set of tiles with different logical assertions, and a companion set providing the justification? I suppose we could put the two together in a single tile but it might be interesting to add the second dimension.

### Re: Draggable proofs

by Peter Selinger -
What you say would be possible, but not without changes to the draggableProof package, which would involve some JavaScript and CSS programming. I think for a 2-column proof like you have in mind, it would be better if the tiles went to pre-determined slots, rather than dynamically expanding and shrinking the list as is the case with 1-dimensional problems. Or else you get difficulties if the tiles aren't the same height, or if you add a tile to the beginning of one column and it makes all the other tiles in that column move down.

Alternatively, why not just alternate the steps and the justifications? One could make the steps left-aligned and the justifications right-aligned, perhaps? As in

Step1
by reason
Step2
by reason
...

This way it could work with the package as it (modulo the ability to align the content of the tiles, which is currently centered).

Also, if some of the steps or reasons aren't unique, it would require some work, because the current answer checker assumes there is a unique solution (and I think two tiles are internally considered different even if they have the same text on them). This could be fixed relatively easily.

At the moment I am going to concentrate on getting the current features to work reliably, since there are still apparently some issue with webwork 2.12.

-- Peter

### Re: Draggable proofs

by Sean Fitzpatrick -
Thanks, that's a reasonable suggestion. I'll pass this along to those likely to use it. (I myself am not a big fan of two column proofs...)

Uniqueness could be an issue, eg. if there are multiple steps with a justification like "or-elimination". If we come up with something, I'll let you know.

### Re: Draggable proofs

by tim Payer -
Hello,

(posted Tuesday 23rd, 11:49pm)

But unfortunately we are having problems with the execution of our draggable proof problem.

Previously our draggable proof problem "worked", but only with the known problems of duplicating word blocks before Peter submitted his new macro for draggableProof.

While our problem sets for draggable with the new macro shows the rounded rectangles of the word blocks mentioned in the improved macro, unfortunately, the word blocks are now fixed and can not be dragged.
When we submit for an answer to test for a response we get the following error message:

• Argument "choose" isn't numeric in array slice at line 279 of [TMPL]/macros/draggableProof.pl

But Line 279 in our draggableProof macro shows this line of code:

$ans->{student_ans} = "(see preview)"; So we have obviously done something wrong in either the problem or in loading the macro. I was hoping that perhaps some one could post a working version of a draggable proof problem on the OPL with which we could adapt our problem sets? I have loaded the problem example if you think you find our glitch. Thanks for any feedback, Tim ############################# # DESCRIPTION Interpretation of the Confidence Interval # Translate descriptions of critical points and function # into correct notation. # WeBWorK problem written by TimPayer <tsp1@humboldt.edu> # ENDDESCRIPTION ## DBsubject(Calculus-single variable) ## DBchapter(Differentiation) ## DBsection(Conceptual understanding of derivatives) ## Institution(Humboldt State University) ## Author(Tim Payer) ## KEYWORDS(derivative, translate, notation) DOCUMENT(); loadMacros( "PGstandard.pl", "PGunion.pl", "MathObjects.pl", "parserPopUp.pl", "unionTables.pl", "niceTables.pl", "PGML.pl", "PGcourse.pl", "draggableProof.pl", ); TEXT(beginproblem()); #install_problem_grader(~~&std_problem_grader);$showPartialCorrectAnswers = 1;

#Context("Numeric");
Context()->texStrings;

$popup1 = PopUp( ["choose", "A", "B", "C" ],"C");$popup2 = PopUp(
["choose", "D", "E", "F", "G"
],"F");

$popup3 = PopUp( ["choose", "H", "I", "J", "K", "L" ],"H");$CorrectProof = DraggableProof([
"95% confidence means that",
"95% of all guinea pig brain cells",
"sampled will form",
"confidence intervals that",
"contain ",
"the true mean count of ",
"the dendritic branch segments emanating from the brain cell."
],

[
"there is a 95% chance that",
"the sample mean count of the",
"will exist within",
"we have calculated."
],

SourceLabel => "Choose phrases from here...",
TargetLabel => "...to create the correct interpretation of confidence here.",
);
BEGIN_PGML
*Drawn from the Lecture Notes: Week 6 Day 1, Quiz 5 Prep.*

*11.3)* A dendritic tree is a branched structure that emanates from the body of a nerve cell. In a study of brain development, researchers examined brain tissue from seven adult guinea pigs. The investigators randomly selected nerve cells from a certain region of the brain and counted the number of dendritic branch segments emanating from each selected cell. A total of 36 cells were selected, and the resulting counts are given in the table below.

[@
DataTable(
[
[["38 25 35 48 17 26 $BR 47 24 38 38 49 41$BR 35 44
45
31
32
59 $BR 42 35 33 53 24 26$BR 28
35
26
29
26
26 BR 38 25 28 46 39 53 ", ], ], ], caption => ' The number of dendritic branches for 36 nerve cells. ', midrules => 1, align => '|p{1.3in}|', ); @]*** Using [\bar x = 35.67], and [sd = 9.99] gives us [SE_{\overline x} = \frac{9.99}{\sqrt{36}}=1.67] Then we obtain the confidence interval of [35.67 \pm (2.042)(1.67)] or: [32.3 < \mu < 39.1] *11.3a)* Choose the letter that best describes why the preceding analysis might be criticized. (Hint: Are the observations independent?) [___]{popup1}

*A.)* The data is not large enough to ensure that we have a normal distribution.
*B.)* Seven rodents and 36 brain cells cannot form an even grouping of data. At least one rodent is over represented in the sample.
*C.)* The count of branch segments emanating from a nerve cell will vary over the rodents life. A single snap shot of a count of cells will not give a reliable comparison unless the specific age of the rodent is considered.

*11.3b)* Create 2 histograms of the sample data with R. Does the shape of these histograms support the criticism made in part a?

[@
DataTable(
[
[["Web Page Access: ", headerrow => 1], "Or the URL link: "],
[[" \$$\\rightarrow\$$ users.humboldt.edu/tpayer $BR \$$\\rightarrow\$$ Stat_109$BR
\$$\\rightarrow\$$ Data Files BR \$$\\rightarrow\$$ HW11.csv" ], htmlLink( "http://users.humboldt.edu/tpayer/Stat_109/Data%20Files/HW11.csv","HW11_Nerves_data_set" ) ], ], caption => ' Access the HW11.csv MS Excel file at either location:', midrules => 1, align => '|p{2in}|p{2in}|', ); @]*** Still need some help loading the data into R-Studio? Try checking out the pdf file called "Loading_CSV_Files_in_R_Studio.pdf". This document uses the HW 10 data set as an example. Look in the folder: *users.humboldt.edu/tpayer* [\rightarrow] [\rightarrow] Stat 109 [\rightarrow] Loading_CSV_Files_in_R_Studio.pdf [@ DataTable( [ [["Create two histogram plotsBR with different bin widths." ], " Hints for R code: " ],
[["1.) The default display. $BR$BR
2.) The histogram bin span set to 1.5." ], " $BBOLD > attach(HW11)$BR > hist(Nerves) $BR > bins = seq(16.5, 61.5, by = 1.5$BR > hist(Nerves, breaks = bins) $EBOLD" ], ], caption => "Compare the distributions of two$BR histograms drawn from the same data set. ",
midrules => 1,
align => '|p{2.5in}|p{2.5in}|',
);
@]***

* Based on the comparison of your two histograms, select one of the four statements below that best explains the criticism made in part a above: [___]{$popup2} *D.)* The data set does not pass normality, it is skewed left. *E.)* The data set does not pass normality it is skewed right. *F.)* The distribution shows 2 or perhaps 3 modes which may reflect the hierarchical structure in the data. That is, the different modes may represent different age classes of kinds of guinea pigs. *G.)* There is always variation in a random selection of data. With such a small data set it is not unusual to see what looks like a blending of 2 or 3 modes within one normal distribution. *11.3c)* Interpret the meaning of the confidence interval in the context of this problem. If we have 95% confidence then 95% of what must be true? Choose the one correct interpretation within the following list below: [___]{$popup3}

*H.)* 95% confidence means that 95% of all guinea pig brain cells sampled will form confidence intervals that bracket the true mean count of dendritic branch segments emanating from a guinea pig's brain cell.
*I.)* 95% confidence means that 95% of all guinea pigs will have a mean number of dendritic branch segments emanating from each selected brain cell that falls within the confidence interval that we have calculated.
*J.)* 95% confidence means that 95% of all dendritic branch segments emanating from each selected guinea pig brain cell will exist within the confidence interval that we have calculated.
*K.)* 95% confidence means that 95% of all sample means of the count of dendritic branch segments emanating from each selected guinea pig brain cell will exist within the confidence interval that we have calculated.
*L.)* 95% confidence means that 95% of all guinea pig brain cells sampled will form confidence intervals that bracket the sample mean count of dendritic branch segments emanating from a guinea pig's brain cell.

END_PGML

BEGIN_TEXT

$BBOLD 11.3c)$EBOLD Interpret the meaning of the confidence interval in the context of this problem. If we have 95% confidence then 95% of what must be true? $BR$BR
Click and drag \{ $CorrectProof->numNeeded\} sentence framents from the left column to form a correct interpretation of the meaning of 95% confidence in the right column.$PAR
\{ $CorrectProof->Print \} END_TEXT Context()->normalStrings; # Answer Evaluation ANS($CorrectProof->cmp);

BEGIN_PGML_SOLUTION

1. [@ $popup1->correct_ans("g'(12) = 0") @]*. 2. [@$popup2->correct_ans("g'(14) < 0") @]*.
3. [@ \$popup3->correct_ans("g'(15) = 0") @]*.

END_PGML_SOLUTION

ENDDOCUMENT();

### Re: Draggable proofs

by Peter Selinger -
Hi Tim,

what version of Webwork are you using? My draggableProof macro works on our Webwork 2.13 system, but of course I did not test it on any other systems yet. I am trying to install a 2.12 system to see if I can get it to work with that. I would like to emphasize that I am not a Webwork developer; only a problem author. So I don't have a lot of experience with integration and compatibility testing. Basically all I have done so far is make it work for me.

Before posting the new version with rounded corners, I also posted two patches: one to fix the duplicate tiles bug, and another to make it work with touchpad devices. The patches are relative to the version of draggableProof.pl that can be found at https://github.com/openwebwork/webwork-open-problem-library/blob/master/OpenProblemLibrary/macros/MC/draggableProof.pl

You mentioned previously that applying the patches did not work. Do you mean you were unable to apply the patches, or that you applied the patches and the patched version did not work?

When the tiles are not draggable, can you press F12 in your browser and bring up the JavaScript debugging console? This may show errors (not just warnings) if something is not working, like a script failed to load or a file was not found.

I included two example draggable proof Webwork problems on the website where I put the macro:

One of them is called ProofDemo.pg and the other ProofVectorSpace.pg. They are relatively uncomplicated problems you could use for testing.

### Re: Draggable proofs

by Peter Selinger -
John and Tim,

I finally had a chance to try my macro on a WeBWorK 2.12 server, and I am happy to report that it is working just fine! So perhaps you installed one of the files in the wrong place?

Please watch this short movie to see how I installed the macros and a demo problem on WeBWorK 2.12 (the same instructions also work for 2.13). If you follow these steps and it still doesn't work, please let me know which step went wrong!

Thanks, -- Peter

### Re: Draggable proofs

by John Travis -
That's it! The new js file was what I was missing.

Life is now good. My students will be especially pleased to avoid the duplicates.

Thanks for figuring this out.

### Re: Draggable proofs

by tim Payer -
YES! Success!

Thank You Peter, I too was missing the new js file in my html!

My example problems all work as they should now.

Even better with the outline target drop cells and the scrolling option.

And a special thanks for the video to help me see the missing js file.

I am looking forward to using this in my Stat class....

Best, Tim