WeBWorK Main Forum

Embedding WeBWorK problems in web pages

Embedding WeBWorK problems in web pages

by Keir Lockridge -
Number of replies: 14
I was able to use the directions here

https://michaelgage.blogspot.com/2015/06/whether-writing-full-text-book-or-just.html

to successfully embed WW problems from my server in a web page. A couple of questions:

(1) In the iframe code you pass a randomization seed using "&problemSeed=123567890". Is there a way to get the randomization to change whenever you refresh the page, or is there a way to have a button on the problem to change the randomization?

(2) The account I created to do all this (see the instructions above) has login_proctor permissions. I find that as long as one knows the file system path to the pg file, they can use this account to view the entire problem. Is there a way to impose a restriction so that this user can only view problem files in a certain directory or directories?

(3) Can I somehow change or add to the list of parameters in the iframe code so that the solution to the problem is only visible after a certain number of attempts, instead of being immediately accessible?

--Keir
In reply to Keir Lockridge

Re: Embedding WeBWorK problems in web pages

by Sean Fitzpatrick -
In reply to Sean Fitzpatrick

Re: Embedding WeBWorK problems in web pages

by Keir Lockridge -
Yes! This does exactly what I want:

https://www.math.ubc.ca/~andrewr/m4pr/subsection-1.html

But looking at the page source, it is a lot of PreTeXt stuff, and I can't figure out how to extract the bare minimum (I don't want to make my page a PreTeXt page). Thank you very much for the link -- I bet if I dig deeply enough I can figure out how they did it and use some version of their method.
In reply to Sean Fitzpatrick

Re: Embedding WeBWorK problems in web pages

by Keir Lockridge -

I asked one of my students to solve the randomization part of my problem; he did so very quickly!

Is there a parameter that one can pass to html2xml that will make it so that the solution link is not displayed? Where can I find a list of all the valid parameters one can pass to html2xml?

To use the javascript included below, do this:

<html><wwproblem
width="750"
height="800"
probpath="path/to/problem/problem.pg"
course="coursename"
userid="userid"
password="password"
wwroot="https://yourschool.edu/webwork2"
seed="123456789">
</wwproblem>
<script src="path-to-javascript-file-below"></script>
</html>

******************************************************

function set_random_source(probID) { var seed = Math.floor(Math.random() * 10000000000); set_source(probID, seed); } function set_source(probID, seed) { var prob = document.querySelector('wwproblem[probID="' + probID + '"]'); var fr = prob.querySelector('iframe[probFrameID="embeded-window-' + probID + '"]'); var wwroot = prob.getAttribute('wwroot'); var probpath = prob.getAttribute('probpath'); var course = prob.getAttribute('course'); var userid = prob.getAttribute('userid'); var password = prob.getAttribute('password') fr.src = wwroot + "/html2xml?&answersSubmitted=0&sourceFilePath=" + probpath + "&displayMode=MathJax&courseID=" + course + "&userID=" + userid + "&course_password=" + password + "&outputformat=simple&problemSeed=" + seed; } var problems = document.getElementsByTagName('wwproblem'); for (var i = 0; i < problems.length; i++) { var prob = problems[i]; var width = prob.getAttribute('width'); var height = prob.getAttribute('height'); var seed = prob.getAttribute('seed'); var wwroot = prob.getAttribute('wwroot'); var probpath = prob.getAttribute('probpath'); var course = prob.getAttribute('course'); var userid = prob.getAttribute('userid'); var password = prob.getAttribute('password'); prob.setAttribute("probID", i); var probID = prob.getAttribute('probid'); // randomize button var rand = document.createElement('button'); rand.style = "margin: 0px 10px 10px 0px; font-size: 12px"; rand.appendChild(document.createTextNode('Randomize')); rand.setAttribute('onclick', 'set_random_source("' + probID + '")'); prob.appendChild(rand); // reset button var res = document.createElement('button'); res.style = "margin: 0px 10px 10px 0px; font-size: 12px"; res.appendChild(document.createTextNode('Reset')); var seed = seed == null ? 123456789 : seed; res.setAttribute('onclick', 'set_source("' + probID + '", "' + seed + '")'); prob.appendChild(res); prob.append(document.createElement('br')); // iframe var fr = document.createElement('iframe'); fr.width = width == null ? "100%" : width; fr.height = height == null ? 500: height; fr.setAttribute('probFrameID', "embeded-window-" + probID); fr.src = wwroot + "/html2xml?&answersSubmitted=0&sourceFilePath=" + probpath + "&displayMode=MathJax&courseID=" + course + "&userID=" + userid + "&course_password=" + password + "&outputformat=simple&problemSeed=" + seed; prob.appendChild(fr); }

In reply to Keir Lockridge

Re: Embedding WeBWorK problems in web pages

by Alex Jordan -
Hello Keir,

It sounds like your student worked out how to make a button that uses javascript to randomize the seed. One thing you might consider (which is being done at that PTX example you saw) is to not truly randomize the seed. You can make it so the page always initially loads with the same seed, and that pushing a randomization button goes through the same sequence of new versions. I think about scenarios where a student had an issue with a certain random version and later they want to bring that random version up again for discussion. The PTX sample you saw does something like add 100 to the seed with each push of the button.

> (2) The account I created to do all this (see the instructions above) has login_proctor permissions. I find that as long as one knows the file system path to the pg file, they can use this account to view the entire problem. Is there a way to impose a restriction so that this user can only view problem files in a certain directory or directories?

Can you be more specific about the problems you wish to hide? Are they OPL problems? Are they local problems on your WW server that you are not rendering in the HTML pages?

> (3) Can I somehow change or add to the list of parameters in the iframe code so that the solution to the problem is only visible after a certain number of attempts, instead of being immediately accessible?

These methods lump the problem text and solution (and hint) knowls all together. I don't think a parameter could block the solutions and hints without significant edits to FormatRenderedProblem.pl.

Instead, it should be possible to set some things in course.conf so that the login_proctor user cannot see solutions. But a few minutes of searching didn't reveal exactly how to do that. I see one setting ($permissionLevels{show_solutions_before_answer_date}) that is already set to `ta` by default, so that should not be allowing a `login_proctor` to see solutions anyway. The other way a user sees solutions is if the date is later than the answer date. But I'm not sure what the answer date means for these HTML-embedded problems that are not really in a problem set.
In reply to Alex Jordan

Re: Embedding WeBWorK problems in web pages

by Keir Lockridge -

Alex --

Excellent point about the randomization. Thanks for mentioning this.

I was thinking of hiding my own problems; I presume any motivated student could find all the OPL problems. I guess when students do WW problems (I have yet to use WW in the classroom, so I didn't think about this) they can't see the problem path anyway? I was initially worried that they could just use the code for including a ww problem in a webpage to look up solutions to any problem in a set.

Thank you for your response!

In reply to Keir Lockridge

Re: Embedding WeBWorK problems in web pages

by Michael Gage -
it can only access problems available to the daemon_course. This usually includes
a link to the OPL library but it doesn't have to. I usually leave all student users and most homework sets empty for daemon_course just to avoid accidents. At the moment the daemon has the access of a TA to the daemon_course.
In reply to Keir Lockridge

Re: Embedding WeBWorK problems in web pages

by Alex Jordan -

When a student is using WeBWorK in the usual name, they never see file paths. The closest thing is they might be able to take some identifiable text in a problem and search the OPL to find a file path. But for local problems, there's no way for students to get them. (Note that you might be misled if you use "act as a student". You will still see file paths, but it's because "act as a student" is not 100% what you would expect it to be.)

Of course, they can see the file paths to the problems that you embed in the HTML page, since it's right there in the underlying HTML. But presumably those problems are different than the ones you will use in homework. Or at least there is not 100% overlap between the two sets.

If you want extra protection, you could make it so the course that is hosting the embedded problems can only access the problems that are embedded. So for example, in that course's templates/ folder you could remove the link to the OPL ("Library"). And you could remove anything else in that course's templates/ folder that leads to local problems. Just leave access to those problems that are embedded.



In reply to Alex Jordan

Re: Embedding WeBWorK problems in web pages

by Keir Lockridge -

I like this idea very much. I removed all the library links from the course except for one to a new library just for embedded problems. Thanks!

In reply to Alex Jordan

Re: Embedding WeBWorK problems in web pages

by Michael Gage -
I'm not following this closely (I've got another project) but you
can replace simple with simple2 to remove the "show correct answer button".
(the formats in WebworkClient/.... simple_format and simple2_format )
At the moment I don't see a way to change the format conditioned on due date.

There might be some clever way to use this with only slight changes to FormatRenderedProblem.pl or by changing the calling iframe depending on the due
date as determined by the calling script.
In reply to Michael Gage

Re: Embedding WeBWorK problems in web pages

by Keir Lockridge -
I get this error:

Unknown format name simple2 at /opt/webwork/webwork2/lib/FormatRenderedProblem.pm line 488.

Do I need to install something?
In reply to Keir Lockridge

Re: Embedding WeBWorK problems in web pages

by Alex Jordan -

simple2 may only exist in more recent versions of WW. What version are you using?

To amend something I said before: another situation occurred to me where students see file paths. It's not likely to be a concern for you. But if you, as the instructor, make PDFs of the problem sets for the students, then file paths show. On occasion, I've made PDFs of problem sets if I wanted a class to spend a little time in class working on some homework, and I can't rely on everyone having a laptop, tablet, smart phone, etc.

In reply to Alex Jordan

Re: Embedding WeBWorK problems in web pages

by Keir Lockridge -
I'm using 2.15.

Thanks for the heads-up about the PDFs!
In reply to Keir Lockridge

Re: Embedding WeBWorK problems in web pages

by Alex Jordan -

OK, I just checked, and I do not have it either on my 2.15 server. It's there in the development branch though, so maybe will come in 2.16?

If you like, you could go to /opt/webwork/webwork2/lib/WebworkClient/ and copy the file simple_format.pl to something else that ends in _format.pl. I wouldn't use "simple2" because that might clash when you upgrade. Then you could edit your new _format.pl file to leave off the "show correct answers" button. (But this approach is not going to help with blocking the solution knowl.)

In reply to Alex Jordan

Re: Embedding WeBWorK problems in web pages

by Michael Gage -

That's exactly how I created the file simple2_format.  It's part of develop but I suspect we should rename it and possibly other formats before the next official release so that the names are more intuitive. 

I think you set up your client so that it uses simple2 before the due date and simple after the due date.