Web page lesson and self-test FAQ
(draft)

Quick links

  1. background
  2. the pieces
  3. so you want to make a lesson of your own
  4. the mechanics
  5. FAQ
  6. March 2013 upgrade
  7. March 2013 thoughts for more tweaks

Background

My goal in putting together these several templates was to provide a way for teachers to provide material in a state-of-the-art web format without needing to know a great deal about the underlying coding. Web browsers are getting more sophisticated and provide a number of features which are applicable to education.

The pieces

The typical combination of pages includes:

  1. one or more lesson/instructional pages
  2. a self-test (test page and detail answers page)
  3. Web coding: HTML, JavaScript code, and array data techniques

1) Instructional page(s)

A major aspect of learning new material is assimilating a new vocabulary. In the Windows Help convention words appearing in green have defintions. They pop up a new window when you allow the mouse to hover over them. JavaScript provides this functionality

Internal table of contents with links to paragraphs to allow students to move more easily around the material

Plenty of white space, pictures, diagrams

2) Self-test concepts

There were several aspects of the self-test page that I wanted to incorporate

  1. support both True/False and multiple choice questions
  2. allow the teacher to choose the combination of questions
  3. provide student an immediate scoring of test (simple numerical score)
  4. provide the students with a detailed answer sheet to show exactly which questions they got right and which ones they got wrong
  5. provide links back to the specific area in the base material which answers the question
  6. mechanics: the teacher should enter the questions only once (i.e. not have to maintain both the question and answer pages)

3) Web coding: HTML, JavaScript code, and array data techniques

note #1: JavaScript must be enabled on the student's browser for the JavaScript functions to work.
note: #2: The student must accept cookies in order to carry answers over to the detailed answer page.

Some JavaScript code exists on each of the template pages, usually at the top or bottom of the page. Generally you will not need to edit or change any of this code.

Here is a description of each of the techniques used:

  1. vocabulary words appear is distinct color (green) --- HTML - font tag
  2. pop-up vocabulary words --- JavaScript
  3. two questions types --- separate JavaScript function to support each questions type. This also allows teacher to mix and match questions type in any order.
  4. immediate 'scoring' button to calculate student score on self-test page --- JavaScript
  5. transfer student answers from self test page to detailed answer page --- 'cookie' generated by JavaScript
  6. use answer key for grading and to show student the correct answers --- JavaScript
  7. use anchor technique in lesson pages to mark specific areas where answers are located. Have teachers list 'links' to be provided with each answer. --- HTML anchor and anchor reference.

so you want to make a lesson of your own

Here are the list of things you will need.

  1. content for the web page. This includes
    • basic lesson content
    • images
    • reference sites (background) for teachers
    • a plan
  2. a set of 10 self-test questions.
    • Either true/false or 4-item multiple choice. These can be combined in any order.
    • an answer key for the questions
    • location in the web page material which answers each question
  3. a set of templates which you will customize to your material.

the mechanics

Suggested order:

  1. store a copy of the web page template: webplate.html (needed to get shell for JavaScript) as a new file

  2. add/create your content on this page using your favorite editor. Some knowledge of HTML would be very helpful, but not absolutely required. If you'd like to learn more about HTML, I strongly recommend the interactive lab. See @HTML under 'TUTORIALS/Learning Labs'

  3. activate the pop-up vocabulary feature for selected words: four steps

    1. surround the word with the JavaScript code to activate the pop-up. In the code below, the vocabulary word I want to activate the pop-up feature for is 'angiosperm'

      <A HREF="javascript:void(0)" onMouseOver="if (NS4 || IE4) activateEl('angiosperm', event)" onMouseOut="clearEl()"><font color="Green">angiosperm</font></A>
    2. you will need to do this for each occurance of the word(s) where you want the pop-up to occur. hint: build it once, then use 'cut & paste'.

    3. insert the definition you wish to pop-up in the portion of the JavaScript that is at the bottom of the document template. An entry looks like:

      makeEl("angiosperm", 300, "A flowering plant that produces seeds in fruit.");
    4. This entry needs to be made only once, even if the word has several pop-up occurrences. The '300' in the above line refers to the width of the pop-up box in pixels (1 screen inch =~ 72 pixels).

  4. decide on self-test (question) structure -- some combination of True/False and/or 4 item multiple choice. Make up the actual questions.

  5. Store a copy of the JavaScript resource webtest01.js as a new file. Code the test questions and related material. This file is where you enter your questions, choices, correct answer (answer key), and linkback text. This page is a series of JavaScript array definitions. Here is a sample True/False question...

    var testQ1=new Array()
    testQ1[0]='    Eelgrass is an \'annual\' plant that grows from seed each year?'
    testQ1[1]='True'
    testQ1[2]='False'
    key[1]='    b'
    linkRef[1]='    Read <a href="egrass01.html#q_1">how eelgrass is classified</a>.'

    In the above sample you would replace the areas in black text, with your text. You are setting 3 values for the array 'testQ1', 1 value for the array 'key', and 1 value for the array 'linkRef'.

    The mulitple choice version is similar:

    var testQ6=new Array()
    testQ6[0]='    Detritus is ...?'
    testQ6[1]='     a common disease which affect eelgrass.'
    testQ6[2]='     organic debris from decomposing organisms.'
    testQ6[3]='     the genus name for eelgrass.'
    testQ6[4]='     a disease acquired by humans who eat eelgrass.'
    key[6]='    b'
    linkRef[6]='    Look at the vocabulary pop-up for <a href="egrass01.html#q_6">detritus</a>.'
  6. add the linkRef anchors to the main lesson page(s). An anchor is a location mark within an HTML document which is the equivalent to a link within a page. A URL of 'lesson.html#important' will position the page at an anchor named 'important' onl the page 'lesson.html'. The code for an anchor is:

    <a name=q_1></a>

    or if the area already has a 'a' tag, all you need to add is the 'name=' keyword

    <a name=q_6 HREF="javascript:void(0)" onMouseOver="if (NS4 || IE4) activateEl('detritus', event)" onMouseOut="clearEl()"><font color="Green">detritus</font></A>
  7. code the self-test page. Copy and store the actual test -- webtest01.html as a new file.

    For each True/False question you will need a line like:

    trueF(testQ1,'testQ1','1')

    For each Multiple choice question you will need a line like:

    multi4(testQ6,'testQ6','6')
  8. code the answer sheet page. Copy and store the test answer page -- webtest01a.html as a new file.

    For each True/False question you will need a line like:

    rtrueF(testQ1, "a1", "1")

    For each Multiple choice question you will need a line like:

    rmulti4(testQ6, "a6", "6")

FAQ

  1. What will happen if the student's browser does not support JavaScript?

    There are two issues to distinguish. The first is whether or not the student's browser supports JavaScript. The second is whether or not that support is enabled. The second issue is easy to resolve, simply enable JavaScript and reload the page. In the first instance, a current version of the browser must be installed. Netscape or Internet Explorer 4.0+ are the recommended browsers.

    note: A warning message is printed at the top of the screen when JavaScript support is disabled.

  2. None of my questions show up. Why?

    Check the text portion of your questions. Be sure that any use of the single quote mark is preceeded by a slash (\).

  3. Where is the best place to put my reference links for the questions?

    The best place to put the reference links for questions is at the beginning of a sentence.

  4. Why are my vocabulary words....
    • not green? -- check the HTML for <font color="Green">(word)</font>
    • not popping up -- check the HTML definition area for any 'extra' '"'. If you simply must have one in your text, preceed it by a slash (\).

March 2013 upgrade

Having gotten some real $$$ for Sonia's Antarctic pages, I felt guilty about their condition and decided to 'fancy' them up a bit. Here are the main 'cosmetic' things I did:

  1. Center the page and expand the width much like I have done with my Picasa photo gallery pages. width=900 pixels
  2. Set each of the lessons and administrative areas with a unique background color. Easy to do on the DIV call: <div id="Content" style="background-color:#FFF5CB">
  3. Update copyright dates
  4. Co-ordinate lesson colors on index page as well
  5. Review links. Change some. Sonia agreed to review.

March 2013 thoughts for more tweaks

Some things I was thinking of to continue to improve the pages:

  1. Add links back on each of the lesson specific pages, back to the main index page.
  2. For questions review page, pop up the original in a IFRAME and highlight the exact text that answers the question. Right now it just links to the approximate area of the page.
  3. See what doesn't work on iPad or other new devices like mobile. Vocabulary poo-up, quiz scoring, [new] IFRAME
 

Administrivia:

 doc ID: http://www.botos.com/marine/faq.html
Copyright © 1999-2013. Sonia Botos. Privacy statement. revised: 03/03/2013

Your comments on presentation style, technical content, and anything else relating to the Web are always welcome. Send them to me at mailto gif mbotos@botos.com.