Difference between revisions of "HtmlLinks"

From WeBWorK_wiki
Jump to navigation Jump to search
(fixed "plotting" misspelling)
(added historical tag and gave updated problem link)
 
(4 intermediate revisions by 3 users not shown)
Line 1: Line 1:
  +
{{historical}}
  +
  +
<p style="font-size: 120%;font-weight:bold">This problem has been replaced with [https://openwebwork.github.io/pg-docs/sample-problems/problem-techniques/HtmlLinks.html a newer version of this problem]</p>
 
<h2>Links to Other Web Pages: PG Code Snippet</h2>
 
<h2>Links to Other Web Pages: PG Code Snippet</h2>
   
Line 26: Line 29:
 
$PAR
 
$PAR
 
A crib sheet is also
 
A crib sheet is also
\{ htmlLink( alias('cribsheet.html'), "available" ) \}.
+
\{ htmlLink( alias('cribsheet.html'), "available", "TARGET='_blank'" ) \}.
 
$PAR
 
$PAR
Click \{htmlLink( alias("${htmlDirectory}phaseplaneplotters/index.html"),
+
Click \{htmlLink( "${htmlURL}phaseplaneplotters/index.html",
 
"sketch the graph.", "TARGET=~~"plotter~~"" )\} to use xFunctions for
 
"sketch the graph.", "TARGET=~~"plotter~~"" )\} to use xFunctions for
 
plotting.
 
plotting.
Line 40: Line 43:
 
</p>
 
</p>
 
<p>
 
<p>
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 <code>alias</code> function puts in the correct link for this file.
+
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 <code>alias</code> function puts in the correct link for this file. Setting the target to be <code>_blank</code> will open a new (blank) window or tab.
 
</p>
 
</p>
 
<p>
 
<p>
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 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 <code>${htmlURL}</code> as in the example given or by using <code>alias("${htmlDirectory}phaseplaneplotters/index.html")</code>.
 
</p>
 
</p>
 
<p>
 
<p>
Line 53: Line 56:
   
 
<p>
 
<p>
If we wanted the Web page to appear in a new window, one solution is to resort to the inclusion of a [[JavaScript|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 s/he is working).
+
If we wanted the Web page to appear in a new window, one solution is to resort to the inclusion of a [[JavaScript|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).
 
</p>
 
</p>
   
Line 65: Line 68:
 
<pre>
 
<pre>
 
HEADER_TEXT(&lt;&lt;EOF);
 
HEADER_TEXT(&lt;&lt;EOF);
&lt;script type="text/javascript" <tt>language</tt>="javascript"&gt;
+
&lt;script type="text/javascript" language="javascript"&gt;
 
&lt;!-- //
 
&lt;!-- //
 
function windowpopup() {
 
function windowpopup() {

Latest revision as of 11:13, 29 June 2023

This article has been retained as a historical document. It is not up-to-date and the formatting may be lacking. Use the information herein with caution.

This problem has been replaced with a newer version of this problem

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