HtmlLinks: Difference between revisions
| No edit summary |  (added historical tag and gave updated problem link) | ||
| (10 intermediate revisions by 6 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 23: | Line 26: | ||
|    BEGIN_TEXT |    BEGIN_TEXT | ||
|    The answer to all questions is on |    The answer to all questions is on | ||
|    \{ htmlLink("http://www.google.com/","this page") \}. |    \{ htmlLink( "http://www.google.com/", "this page" ) \}. | ||
|    $PAR |    $PAR | ||
|    A crib sheet is also |    A crib sheet is also | ||
|    \{ htmlLink( |    \{ htmlLink( alias('cribsheet.html'), "available", "TARGET='_blank'" ) \}. | ||
|   $PAR | |||
| "TARGET=~~"plotter~~"" )\} to use xFunctions for  |   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 |    END_TEXT | ||
| </pre> | </pre> | ||
| <td style="background-color:#ffcccc;padding:7px;"> | <td style="background-color:#ffcccc;padding:7px;"> | ||
| <p> | <p> | ||
| We need no additions to the PG file except in the text section, where we use the <code>htmlLink</code> function to insert the link.  There are  | We need no additions to the PG file except in the text section, where we use the <code>htmlLink</code> function to insert the link.  There are three examples here: in all, the page to load is given as the first argument to <code>htmlLink</code>, and the text to display as the link as the second argument. | ||
| </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> | ||
| 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</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 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> | |||
| 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). | |||
| </p> | |||
| </td> | </td> | ||
| </tr> | </tr> | ||
| Line 44: | 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  | 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 56: | Line 68: | ||
| <pre> | <pre> | ||
|    HEADER_TEXT(<<EOF); |    HEADER_TEXT(<<EOF); | ||
|    <script type="text/javascript"  |    <script type="text/javascript" language="javascript"> | ||
|    <!-- // |    <!-- // | ||
|    function windowpopup() { |    function windowpopup() { | ||
Latest revision as of 15:13, 29 June 2023
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.
| 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  
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  
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  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  | 
|   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  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. |