Note: You are currently viewing documentation for Moodle 2.1. Up-to-date documentation for the latest stable version is available here: HTML linking.

HTML linking: Difference between revisions

From MoodleDocs
No edit summary
Line 1: Line 1:
Creative Moodlers have come up with some ways to use HTML linking to navigate within a Moodle site.   This page will give some examples. It is always a good idea to test any links with the permissions of a student to make sure they work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html<?php echo $direction ?>>
<head>
    <?php echo $meta ?>
    <meta name="keywords" content="moodle, <?php echo $title ?> " />
    <title><?php echo $title ?></title>
    <link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/favicon.ico" />
    <?php include("$CFG->javascript"); ?>
</head>


==Formats of common internal links==
<body<?php
Essentially the Moodle id is a unique number associated with a datatable record.   Moodle calls up the right module in view mode and then points that towards an object(database record) that is identified with an id. It is important to pay close attention to the address bar when logged in as a non-student/guest and as a student/guest.
    echo " $bodytags";
    if ($focus) {
        echo " onload=\"setfocus()\"";
    }
    ?>>
<div id="page">
<?php //Accessibility: 'headermain' is now H1, see theme/standard/styles_layout.css: .headermain
      if ($home) { // This is what gets printed on the home page only
?>
    <?php print_container_start(true, ”, ‘header-home’); ?>
<h1 class=”headermain”>
<img src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/pix/sed.png” alt=”Institutions Logo” />
<?php echo $heading ?></h1>
<div class=”headermenu”><?php echo $menu ?></div>
<?php print_container_end(); ?>


The examples below were created in demo.moodle.org and used the Features Demo lesson in the examples. 
    <div id="headerflashintro">


:''Tip:''  One way to copy a location using most browsers is to right click on the object, then select the "copy location link".  Then paste this address into the HTML link popup tool.
:''Tip:''  It is important to be aware of roles and permissions.  For example, a student who does not have permission to enter a course can not jump to a page in that course. 
==Course==
<nowiki>http://demo.moodle.org/course/view.php?id=5</nowiki>  ""Moodle Features Demo" course. 


<nowiki>http://demo.moodle.org/course/view.php?id=3</nowiki> "Higher Education Film Studies Module" course.
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="980" height="300" id="intro" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="<?php echo $CFG->themewww.'/'.current_theme() ?>/flash/intro.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="<?php echo $CFG->themewww.'/'.current_theme() ?>/flash/intro.swf" quality="high" bgcolor="#ffffff" width="980" height="300" name="intro" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>


==Activity==
*<nowiki>http://demo.moodle.org/mod/lesson/view.php?id=224</nowiki>  "Moodle Features Demo course, Lesson: Lesson 1"


*<nowiki>http://demo.moodle.org/mod/assignment/view.php?id=197</nowiki>   "Moodle Features Demo course, Assignment: Upload a single file"
    </div>
<?php } else if ($heading) {  // This is what gets printed on any other page with a heading
?>
    <?php print_container_start(true, '', 'header'); ?>
        <h1 class="headermain"><?php echo $heading ?></h1>
        <div class="headermenu"><?php echo $menu ?></div>


*<nowiki>http://demo.moodle.org/mod/forum/view.php?id=215</nowiki> "Moodle Features Demo course, Forum: A standard forum for general use"
    <?php print_container_end(); ?>
<?php } ?>


<nowiki>http://demo.moodle.org/mod/wiki/view.php?id=245</nowiki> "Moodle Features Demo course, Wiki: Course summary wiki"
<div id="headerflashbase"></div>
<?php //Accessibility: breadcrumb trail/navbar now a DIV, not a table.
      if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
    <div id="headernormalpage"></div><div class="navbar clearfix">


===Lesson page===
        <div class="breadcrumb"><?php print_navigation($navigation); ?></div>
The easiest way to determine a Lesson page's location is to use the edit tab and the collapsed view.  Find the page and use the preview icon to view the page.  The browser address bar will show the page location.  Note id=224 is Lesson 1, id=225 is Lesson 2.
        <div class="navbutton"><?php echo $button; ?></div>
 
    </div>
*<nowiki>http://demo.moodle.org/mod/lesson/view.php?id=224</nowiki>  "Moodle Features Demo course, Lesson 1" page 1 (Title: A Demonstration Lesson) The first page of the lesson.
<?php } else if ($heading) { // If no navigation, but a heading, then print a line
 
?><?php } ?><!-- END OF HEADER --><?php print_container_start(false, '', 'content'); ?>
*<nowiki>http://demo.moodle.org/mod/lesson/view.php?id=224&pageid=106</nowiki> "Moodle Features Demo Course, Lesson 1" page 1 (Title: A Demonstration Lesson) also the first page of the lesson.
 
*<nowiki>http://demo.moodle.org/mod/lesson/view.php?id=224&pageid=113</nowiki>   "Moodle Features Demo course, Lesson 1" page 8 (Title: Building lessons) a multiple choice question.
 
*<nowiki>http://demo.moodle.org/mod/lesson/view.php?id=224&pageid=119</nowiki>  Moodle Features Demo course, Lesson 1 page 14 (Title: Score the simple way) a branch page.
 
*<nowiki>http://demo.moodle.org/mod/lesson/view.php?id=225&pageid=136</nowiki>  Moodle Features Demo course, Lesson 2 page 3 (Title: Multianswer) a multianswer question page.
 
===Wiki page links===
<nowiki>http://demo.moodle.org/mod/wiki/view.php?id=245&page=Course+summary+wiki</nowiki> "Moodle Features Demo course, Wiki: Course summary wiki" opening page.
 
These pages do not exist in demo.moodle and these address will take the student to the page in edit mode.  If the page exists, the student will view the page via the link.
 
*<nowiki>http://demo.moodle.org/mod/wiki/view.php?id=245&page=New+page</nowiki> "Moodle Features Demo course, Wiki: Course summary wiki" A page called "New page".
 
*<nowiki>http://demo.moodle.org/mod/wiki/view.php?id=245&page=WikiPageLink</nowiki>"Moodle Features Demo course, Wiki: Course summary wiki" A page called "WikiPageLink".
 
===Forum threads===
Forums have a slightly more confusing formats. A forum has an activity id and also has a forum id.wa An easy way to identify the forum id is to click on a forum, then click on the forums link in the breadcrumb.  By entering a forum this way (or holding your mouse over the link) you will immediately see the f= id. 
 
*<nowiki>http://demo.moodle.org/mod/forum/view.php?id=215</nowiki> The forum activity id. Student see forum with threads.
 
*<nowiki>http://demo.moodle.org/mod/forum/view.php?f=16</nowiki> The forum id. Student sees forum with threads
 
*<nowiki>http://demo.moodle.org/mod/forum/post.php?forum=16</nowiki> will create a blank post in edit mode for the student in the forum.
 
The third forum is a single post discussion.  Here you will see the #p being used in the address bar.  Essentially this number is only useful in the edit mode and is ignored in the view mode. 
 
*<nowiki>http://demo.moodle.org/mod/forum/view.php?f=18</nowiki> A single post discussion forum
 
*<nowiki>http://demo.moodle.org/mod/forum/view.php?f=18#p240</nowiki> The teacher's first page.
 
These pages were created on demo.moodle in the single post forum.
<nowiki>http://demo.moodle.org/mod/forum/view.php?f=18#p242</nowiki> The students first post in the forum.  In view mode this is the same as f=18 .
 
*<nowiki>http://demo.moodle.org/mod/forum/post.php?edit=242</nowiki>  The link to send the student back to their post in edit mode. (Remember that if time expires, they will not be able to edit).
 
Here is a link to a forum discussion on Higher Education Film Studies Module: Topic 3: Women, Robots and Dirty Dishes (1970s) and the forum called "Women and Robots".  This is an open enrollment course, so a link from another course, will first ask the student if they wish to enroll. 
 
<nowiki>http://demo.moodle.org/mod/forum/view.php?f=9</nowiki> The Women and Robots forum showing all threads.
 
*<nowiki>http://demo.moodle.org/mod/forum/discuss.php?d=44</nowiki> This is the thread on "Emotion and The Stepford Wives" in the Women and Robots forum.
 
==Resource links==
Find the file using the course administration block and the files link. 
 
<nowiki>http://demo.moodle.org/file.php/5/media/bonjour.mp3</nowiki> An mp3 file located in Features Demo Course files>media.
*<nowiki>http://demo.moodle.org/file.php/5/images/moodle-logo.jpg</nowiki> An image file located in Features Demo Course files>images .
 
*<nowiki>http://demo.moodle.org/file.php/3/frank.gif</nowiki> An image file located in the Higher Education Film Studies Module course. 
 
*<nowiki>http://demo.moodle.org/file.php/3/overview.doc</nowiki>  An word document file located in the Higher Education Film Studies Module course.
 
==How to create a link==
For the purpose of example, we will use the content area of a branch table.  What is important is that it where ever the link is being added, that it has the standard Moodle HTML edit bar. 
*Find the page you want to link to and copy or note the address in the address bar
*Go to the content area where you want to place the link
*Type the text you would like the reader to see. 
*Block (highlight) the text
*Select the insert web link tool (chain link icon)
*Paste the address in the first line of the popup box
*Optional-enter the arrow text
*Save the popup tool.
*Words should now indicate they are linked (usually underlined or in blue).
 
Repeat as needed.
===How to link with a HTML edit bar===
[[Page_content]] for more information
[[Image:Ed link.gif|frame|left|]]
[[Image:HTML Link Insert moodleorg.JPG]]
<nowiki><a href="http://moodle.org">HERE</a></nowiki>
 
===How to link without a HTML edit bar===
The easy way is to put in the link somewhere  that has an HTML edit bar, then go to text mode, copy the code and then paste it.  This will usually work for pictures and most links.
 
 
===Shorten generic link formats===
This is section requires more knowledge. In most of the examples on this page, the full HTML link is used.  This works if you are not moving your course or site to another URL.  However, it is possible to shorten the link so it will translate better in a backup and restore to another site. 
:This trick will only work if your moodle is located directly off the webroot, such as it is in demo.moodle.org. 
 
*<nowiki><a href="http://demo.moodle.org/mod/resource/view.php?id=232"> A link to a resource that happens to be found in Features Demo</a></nowiki>
**The above link is an example of the full or long html link.
 
:''TIP:'' Remember that a resource id's is different than a course or an activity id.  And there are lots of "view.php" files in Moodle :)
 
*<a href="view.php?id=232" title="rl">A link to resource that happens to be in Features Demo</a>  
**This entry was placed in a main menu block on the front page of demo.moodle.org in a Web page resource.
**The short address worked because it assumed the call was made from "moodle/mod/resource". 
*<a href="/course/view.php?id=5"> A link to features Demo</a>
**An example of a short link placed in an Web page resource in a main menu block in demo.moodle.org. 
**Note it is required to put more of the path because the call will start in the mod/resource directory but we want to view a course not a resource. 
*<a href="/mod/lesson/view.php?id=224"> A link to a lesson</a>
**An example of a short link placed in a Web page resource in a main menu block in demo.moodle.org .
 
Finally, if your moodle is not at the site root, say it is at TrainingMoodle.org/Moodle196, then these short cuts will not work.  You may have to add Moodle196 to the path.  And of course if you backup and try to restore to another site that does not have the same file structure, the links will be broken.  Sorry.
 
==Internal Linking ideas==
*There was the Library (aka Course) of Lessons and resources idea.  Essentially set up a course as an open library, use topics to loosely organize activities and resources.  Use links from within other courses for standard refreshers or what ever.  Paste them in a wiki, in a lesson (content area, answer, teacher response), you get the idea.
 
*Category "course short cut" or a course redirect.  Put a course in one category, that redirects the student to the real course in another category.  Simple, put an HTML link in the course title to the other course's home page.
 
*The use of links to create an index of lesson pages in the content area, instead of branch table jumps.  This gives endless possibilities of groupings and directions to send students.
 
*Or  master site matrix created on one or more resource pages using links that direct to courses, activities, resources on the Moodle site.
 
*Create a series resources pages, copy the browser link addresses to paste into the next and back hyperlink. Perhaps use a "link to file" or web address resource to open a second window in the course to start the series of linked pages.
 
*Use internal linking and hidden topics to visually shorten a course page for a student. See the Course homepage [[Course homepage#Tips and tricks|Tips and tricks section]].
 
*Allow students to see their grades once they reach a certain page in an activity (for example a Lesson page). Use the Switch Role to switch to Student. Move your mouse over the link to "Grades" and copy the link location. The link to a user report will look like this <nowiki> http://demo.moodle.org/grade/report/user/index.php?id=5</nowiki>
 
 
==See also==
* [[Autolinking]]
* [[Development:File API]] how files are going to work in Moodle 2.0

Revision as of 01:23, 20 September 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html<?php echo $direction ?>> <head>

   <?php echo $meta ?>
   <meta name="keywords" content="moodle, <?php echo $title ?> " />
   <title><?php echo $title ?></title>
   <link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/favicon.ico" />
   <?php include("$CFG->javascript"); ?>

</head>

<body<?php

   echo " $bodytags";
   if ($focus) {
       echo " onload=\"setfocus()\"";
   }
   ?>>

<?php //Accessibility: 'headermain' is now H1, see theme/standard/styles_layout.css: .headermain

     if ($home) {  // This is what gets printed on the home page only

?>

   <?php print_container_start(true, ”, ‘header-home’); ?>

<img src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/pix/sed.png” alt=”Institutions Logo” /> <?php echo $heading ?>

<?php echo $menu ?>

<?php print_container_end(); ?>


   	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="980" height="300" id="intro" align="middle">

<param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="<?php echo $CFG->themewww.'/'.current_theme() ?>/flash/intro.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="<?php echo $CFG->themewww.'/'.current_theme() ?>/flash/intro.swf" quality="high" bgcolor="#ffffff" width="980" height="300" name="intro" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>


<?php } else if ($heading) { // This is what gets printed on any other page with a heading ?>

   <?php print_container_start(true, , 'header'); ?>

<?php echo $heading ?>

<?php echo $menu ?>
   <?php print_container_end(); ?>

<?php } ?>

<?php //Accessibility: breadcrumb trail/navbar now a DIV, not a table.

     if ($navigation) { // This is the navigation bar with breadcrumbs  ?>

<?php } else if ($heading) { // If no navigation, but a heading, then print a line ?><?php } ?><?php print_container_start(false, , 'content'); ?>