HtmlLinks

Links to Other Web Pages: PG Code Snippet

This code snippet shows the essential PG code to make a link to another Web page in a problem. Note that these are insertions, not a complete PG file. This code will have to be incorporated into the problem file on which you are working.

A related question might be how to include a link in a problem that opens in another window. This is considered below.

Problem Techniques Index

PG problem file

Explanation

BEGIN_TEXT The answer to all questions is on \{ htmlLink( "http://www.google.com/", "this page" ) \}. $PAR A crib sheet is also \{ htmlLink( alias('cribsheet.html'), "available", "TARGET='_blank'" ) \}. $PAR Click \{htmlLink( "${htmlURL}phaseplaneplotters/index.html", "sketch the graph.", "TARGET=~~"plotter~~"" )\} to use xFunctions for plotting. $PAR Enter 4 feet: \{ ans_rule(10) \} Don't forget to enter \{ helpLink("units") \} END_TEXT

We need no additions to the PG file except in the text section, where we use the htmlLink function to insert the link. There are three examples here: in all, the page to load is given as the first argument to htmlLink, and the text to display as the link as the second argument. The second example shows how to link to a page that is in the same directory on the WeBWorK server as the PG file: the alias function puts in the correct link for this file. Setting the target to be _blank will open a new (blank) window or tab. The third example shows how to link to a page that is under the html subdirectory of a course's main directory. In this example, which is taken from the problem Library/Rochester/setDiffEQ6AutonomousStability/ur_de_6_3.pg, phaseplaneplotters is a subdirectory that has been added under the course's html directory. The course's html directory can be linked using ${htmlURL} as in the example given or by using alias("${htmlDirectory}phaseplaneplotters/index.html"). The fourth example uses the built-in helpLink feature of WeBWorK. Currently, the options for helpLinks are "units", "interval notation" and "syntax", although more options will be added soon (probably by summer of 2010).

If we wanted the Web page to appear in a new window, one solution is to resort to the inclusion of a javascript function to do this. This makes it easy to specify some of the characteristics of the window that is opened, including the size (which may let us avoid having a student open the link in a new window that completely obscures that in which they are working).

PG problem file	Explanation
HEADER_TEXT(<<EOF); <script type="text/javascript" language="javascript"> <!-- // function windowpopup() { var url = "http://www.google.com/"; var opt = "height=625,width=600,location=no,menubar=no," + "status=no,resizable=yes,scrollbars=yes," + "toolbar=no,"; window.open(url,'newwindow',opt).focus(); } // --> </script> EOF	We need make no changes to the tagging & description and initialization sections of the PG file. To use a javascript function to determine the size and characteristics of the window that our link opens in we need to define it in the problem set-up section of the file. The key part of this is that we use the HEADER_TEXT function to include a block of text in the actual HTML header of the problem file when it's sent to the student's browser. This text just defines a javascript function to open a window showing the indicated url, with some options set: here we've specified the size (in pixels) and stripped out most of the navigation tools.
BEGIN_TEXT All answers can be found on \{ htmlLink( "javascript:windowpopup();", "this page" ) \} $BR ${BITALIC}(This will open a new window.)$EITALIC	Then in the text section of the file, we include the call to htmlLink as before, but use it to call the javascript function instead of giving the specific link that we're going to. Depending on your philosophy of Web links, you may want to include a warning to the student that clicking the link will open a new window.

Problem Techniques Index