Difference between revisions of "HtmlLinks"

From WeBWorK_wiki
Jump to navigation Jump to search
(New page: <h2>Links to Other Web Pages: PG Code Snippet</h2> <p style="background-color:#eeeeee;border:black solid 1px;padding:3px;"> <em>This code snippet shows the essential PG code to make a lin...)
 
Line 99: Line 99:
 
[[IndexOfProblemTechniques|Problem Techniques Index]]
 
[[IndexOfProblemTechniques|Problem Techniques Index]]
 
</p>
 
</p>
  +
  +
[[Category:Problem Techniques]]

Revision as of 21:48, 14 February 2008

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") \}.
  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 two examples here: in both, 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.

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 to 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 s/he is working).

PG problem file Explanation
  HEADER_TEXT(<<EOF);
  <script type="text/javascript" <tt>language</tt>="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