Student-centered learning requires innovative pedagogical approaches for presenting ideas and materials that challenge learners to expand their depth of understanding. Hierarchical menu structures provide a self-contained pedagogical framework for focusing student attention on the subject matter of a course. Students can identify, clarify, and expand the course content quite easily within this frame of reference. The key to this approach is providing the student with a web interface that keeps them in the course environment as they navigate the specific lectures, assignments and projects.&nbsp;&nbsp

Graddy, Duane B

English

Middle Tennessee State University: Journals@MTSU

51HIERARCHICAL MENU STRUCTURES AS TEACHING/LEARNING ENVIRONMENTS by Duane B. Graddy* Abstract Student-centered learning requires innovative pedagogical approaches for presenting ideas and materials that challenge learners to expand their depth of understanding. Hierarchical menu structures provide a self-contained pedagogical framework for focusing student attention on the subject matter of a course. Students can identify, clarify, and expand the course content quite easily within this frame of reference. The key to this approach is providing the student with a web interface that keeps them in the course environment as they navigate the specific lectures, assignments and projects.   I. IntroductionMaintaining the students' focus throughout a course in Economics is challenging to say the least. Students tend to wonder away from the material as the topics become more diverse and difficult. Using the Internet to supplement course materials may improve the results somewhat but even here students are pulled away from the course environment as they surf the Web for the answers to specific questions and assignments. Hierarchical menu structures are one way a teacher can create a self-contain d course environment Students can use a hierarchical menu structure to maneuver through their course materials in an efficient and effective manner. Hierarchical menus can be designed for ease of use in identifying, learning, and researching course lectures, assignments, projects, and examinations. By using a hierarchical structure, students stay within the course interface while following the complex set of hyperlinks necessary to complete class assignments or projects.     II. Pros and Cons of Hierarchical Menu StructuresA hierarchical menu structure is an interactive menuing system that provides information in an outline format. Primary topics have a series of subordinate folders or child topics that contain hyperlinked material at every level.1  The outline can be as simple or as detailed as the instructor deems necessary for the particular course being taught. An entire course can be integrated into the hierarchical menu. Restructuring a course in this way has both advantages and disadvantages.  The hierarchical menu structure is advantageous to students in several ways. 1. Having nested groups of topics facilitates previewing, studying and evaluating course materials.2. Relating course material to external sources is simplified within the hierarchical structure.3. Research assignments are easier for the students to follow when topics are listed in an outline format.4. Student interest is enhanced by the system's ease of use and locational focus within the frame set.5. The student stays in the course environment while working on assignments and projects.Nevertheless, using a hierarchical menu structure to present course materials is more time-consuming toimplement than straight hyperlinking of web sources so the question arises whether it is worth the effort todevelop such a system. Of course, I believe the answer to this query is yes. After the initial start-up, thesystem is relatively easy to expand and maintain. Another issue for the nonprogrammer, like myself, is thatsmall scripting errors can become major Saturday projects. All in all, however, the advantages for thestudents outweigh the front-end and maintenance costs.* Professor of Economics and Finance, Middle Tennessee State University, Murfreesboro, TN 37132.Email: dgraddy@mtsu.edu1 Jeff Frentzen and Henry Sobotka, JavaScript: Annotated Achieve, Berkeley, California, 1998, pp. 496-497.52III. Example of a Hierarchical Menu SystemThis section highlights some of the pedagogical aspects of a hierarchical menu system. I refer to this particular system as the course knowledge base. The design of this system includes material for four courses. The initial entry point for the course knowledge base is an icon for one folder. It is pretty unassuming to begin with but explodes to reveal an intricate menu of course materials and sources. The URL for this site is http://www.mtsu.edu/~dgraddy/Load-me.htm. The hierarchical menu has fourteen primary topics that constitute the knowledge base, or stated somewhat differently, establish the course environment. Clicking on any of these primary topics reveals a detailed structure of subtopics or subfolders that contain material useful for the courses. For example if a student was assigned a project that required use of Federal Reserve Board (BOG) statistical information, she/he could click on the primary topic, Policy and Regulation, and then go directly to the BOG Statistical Releases used in the course. An important aspect of this process is that the student doesn’t have to leave the course environment because within this frame set design the student has access to the complete hierarchical menu at all times unless the designer chooses to open a separate window. Coding in a second window may be advantageous at certain times for example when you want to access the knowledge base while using an on-line workbook or problem set.  The advantage of the student being able to remain within the course environment or knowledge base can be illustrated by assuming that he/she is uncertain about the definition of one of the interest rates listed in the BOG release. Take for example the definition of the Federal Funds rate. Going to the left frame of the knowledge base, the student selects Financial Markets. The student then clicks on Financial Instruments and next selects the Money Markets subfolder. A list of money market instruments drops down. The student chooses federal funds. A description of federal funds appears in the right-hand frame. Another advantage of a hierarchical menu system is for organizing course materials. The instructor can provide a detailed outline of how the course material is organized so the student knows all  of the resources 53available at the inception of the course.  Using the first course as an example note the hierarchical structure of the material. The initial groupings: course announcements, lectures and quizzes, searches, data for in-class, assignments, workbook, and library, establish the general outline for the instructional resources. Under each of these folders are sets of subordinate folders that contain hyperlinks to the specific course materials. Basic resources are listed first; the course syllabus, purpose, assignments, downloads, and an interactive question and answers page. Students can submit questions about the material anytime they desire. The Lectures and Quizzes folder houses much of the class resources. Included in this folder are the lectures for the course, a series of self-studying quizzes, review exercises called lecture vocabularies, interactive tests that are old exams from the course, and an other category for on-line handouts. The other three courses follow a similar format adding features unique to the particular subject matter.  Consider the following hypothetical assignment as a way to illustrate the usefulness of the hierarchical menu approach to the course interface. This assignment relates to policy making at the Federal Reserve System and requires use of materials from the WWW. To begin with the student reads the an article entitled, Fed Hikes Rates by One Quarter, describing the Federal Reserves a decision to increase interest rates by 25 basis points.  1. The article mentions that "the FOMC raised its target on the Federal funds rate from 4.75percent to 5 percent .. ." "The Fed also kept the discount rate at 4.75 percent .. ." Describe thestructure and decision-making process of the FOMC. What is the Federal funds rate and what is itsrole as a Fed target? What is the Fed discount rate? Find historical data on the Federal funds andthe discount rate for theyears 1990 - 1999.2. The article goes on tosay "Changes in the Fedfunds rate are typicallymatched by banks' primerates, short-term interestrates on Treasury bills...." Contrast thedefinition of the Federalfunds rate (or federalfunds) from question oneto prime rates andTreasury bill rates.3. "Fed chairman AlanGreenspan signaled thepolicy change intestimony to the JointEconomic Committee two weeks ago ..." Review this testimony and give your assessment ofGreenspan's position. By the way, who is Alan Greenspan? Give a brief summary of hisbackground.4. Irwin Kellner, Chief Economist for CBS.MarketWatch.com stated " If you believe in the wealtheffect -- and I do -- it is adding fuel to the fire ..." What is Kellner implying about the future stateof the economy?The student might use the following process to complete the assignment within the hierarchicalinterface.a. Go to Policy and Regulation then to Federal Reserve System. Click on Open MarketOperations.b. Click on FOMC in the Open Market article.c. Go to Federal Reserve System to Discount Window and click on Discount rate in the article.d. Go to Financial Markets to Money Markets to Federal Funds.54e. For thehistoricaldata go toFinancialMarkets toMoneyMarketRate.f. Go toTreasuryMarkets toDefinitionsto TreasuryFinancing.g. Go toPolicy andRegulationto FederalReserve Information to BOG Testimony.h. Go to Federal Reserve Information to FOMC Member to Alan Greenspan.i. Go to Class Material for Economics 321 to Searches to Yahoo enter "wealth effect" reviewthe search result.IV. Folder Tree ScriptThe hierarchical menu system used for the Course Knowledge Base is an adaptation of a JavaScript developed by Marcelino Martins. The script is a free download at http:// www.geocities.com/Paris/LeftBank/2178/index.html or from other sources such as JavaScript: Annotated Archives Code with Commentary by Jeff Frentzen and Henry Sobotkan, Osborne/Mc Graw-Hill, 1998. A copy of the script is included as an appendix to this paper.  The Folder Tree script consists of three files plus a series of icons, which can be change if desired. 1. Load-me.htm is the frame-maker script. This is the file that contains all of the folder titles andhyperlinks to the information in the hierarchical menu. Load-me.htm creates a menu in outline formatwhere each top-level heading has a series of subordinate topics. The tree is displayed in terms of eightGIF images.22. Basetree.htm isthe frame thatholds thehierarchical menusystem.  Thehierarchical menuis displayedthrough severalGIF files whichcontain the open and close folders, the document and link icons, the three line shapes -- verticalbranch, bottom corner, and vertical with right branch -- that establish the tree/branch structure andblank for areas where no lines exist.2 The components of the tree are part of a 1x2 table. The left cell encloses one more of the GIF files. The right cell contains the accompanying text derived from the string in generateTree(). Frentzen and Sobotka, p. 507.55<HTML> <head> <title>Introduction To Knowledge Base </title> </head> <BODY TEXT="#80ff80" LINK="#ffff00" VLINK="#ffff00" BACKGROUND="mgreen.jpg"> <br> <img align=right  src="know1.gif"> <BR> <BR> <CENTER><H2>SITE KNOWLEDGE BASE</H2></CENTER> <hr noshade size=3 color='#80FF80'> <table> <tr><td width=50><td> The Site Knowledge Base provides a core learning structure for the courses included in this web site. In this area you will find what you need to be successful in the courses; that is, if you use it wisely. <FONT COLOR="white">This site is best viewed with Internet Explorer 4.0</FONT>  <br><br> </table> <hr noshade size=3 color='#80FF80'> </center> </BODY> 3. Basefldr.htm is the file that makes up the initial target frame. The target frame holds the content thatis identified in the hierarchical menu.V. Cookbook Approach to Constructing Folder-treeThe following steps may help you construct your own hierarchical course menu system. 1. Go to the folder-tree web site at http://www.geocities.com/Paris/LeftBank/2178/foldertree.html orother script library and download the three basic files necessary to construct the hierarchical menusystem.2. Download all of the icons necessary to construct the exploding menu or choose some different iconsfor the basic folders.3. Begin editing the Load-me.htm file to meet your course needs. (Keeping all of the copyright notices inthe script.) One way to edit the script easily is to copy and paste it into a Word web page template atthe HTML source level. Of course, many other editors are available so it is really a matter of personalpreference. This pageprovides the framework for developing an outline for your particular course needs. New folders and subfolders can be added to facilitate the construction of almost any course environment. 4. Modify thebasefldr.htm file tomake your own entrypage in the left frame.See the box below fora modified version ofthe basefldr.htm file.5. Load all of the files tothe server and give theusual permissions.Continue to expandand upgradehierarchical menu by adding new folders, subordinate folders, and hyperlinks. 6. Maintain the hierarchical menu by correcting broken hyperlinks and eliminating outdated material.VI. ConclusionsExacting course requirements necessitate innovative approaches to the teaching/learning environment. Hierarchical menu structures provide a means of presenting all of a course’s resources in a compact system of folders and subfolders. The hierarchical menu outlines the entire course with each category or subcategory containing the material for that particular topic. Essentially the students work on specific lectures, assignments and projects within the context of the entire course. Developing a course knowledge base enhances the teaching/learning framework by providing a more complete interface for the students' to interact with. 56For the nonprogrammer, the Folder-tree script is an effective way to develop a course hierarchical menu structure. The script is easy to adapt to different course environments and can be expanded to meet the needs of most courses. Folder-tree provides an effective framework for structuring course resources. References Burns, J. JavaScript Goodies, Indianapolis, Indiana, Macmillan Publishing, 1999. Frentzen, J. and H. Sobotka. JavaScript: Annotated Archives, Osborne/McGraw-Hill, Berkeley, California, 1998. Graddy, D. " Course Web Sites as Learning Environments for Economics Students", Journal of the Tennessee Economics Association, Fall 1998, v.3, no. 1, pp. 35-42.  Holzschlag, M. Web by Design, SYBEX, San Francisco, California, 1998. Appendix  Brief Comments on the FolderTree Script This section provides some brief comments about the FolderTree, Version 1 script. The reader will want to hyperlink to http://www.mtsu.edu/~dgraddy/Load-me.htm to view the FolderTree script. These comments about the script are in the context of the Course Knowledge Base discussed above. A complete annotated reference on the FolderTree script is presented in Frentzen and Sobotka, 1998. Note that the three levels of the hierarchical menu are represented by three variables that are declared by the generateTree function. Aux 1, aux2, and aux3 indicate the array level within the menu. For example in the Course Knowledge Base, Policy and Regulation represents a first level folder, the second is  Financial Statutes, Policy Issues, and so forth. The aux1 folders are appended to the Knowledge Base folder. The string is aux1= appendChild(foldersTree, folderNode(“Policy and Regulation”)). Then the second level of the menu is aux2= appendChild(aux1, leafNode(“Financial Statutes”)). The appendChild () function adds new branches (arrays) to the foldersTree. The string for the first hyperlink in the Financial Statutes folder is appendChild(aux2, generateDocEntry(0, “USC Title 12: Banks and Banking”, “http://www.law.cornell.edu/uscode/12/”, “”)). The 0 or 1 entry in the string generateDocEntry() indicates whether the page will be displayed in the right-hand frame or a new window. Use of this feature depends on what the instructor is trying to accomplish with the hyperlink. For example, a student workbook is included in one of the courses. The workbook comes up as a separate window so the students can more easily maneuver back and forth from the workbook to the Knowledge Base and vice versa. The other two elements of the string are the link’s title and URL.  The generateTree() function is triggered by the onLoad handler within the frameset code, onLoad= ‘intializeTree’. GenerateTree calls on the two array makers (tree branch creators) folderNode() and leafNode() to declare new branches for the hierarchical menu. Each of the branch creators generates a four member array with the last member being the folder’s name. The other three components are flags that track various aspects of the array. The first two flags indicate whether each node or folder is open (1) or closed (0). The third flag shows whether the branch contains subfolders (0) or documents (1). The appendChild() subroutine attaches new objects to the end of the foldersTree. The additions to the array can be from folderNode(), leafNode(), or generateDocEntry() depending on whether they are primary headings in the hierarchical menu, subheadings or linked documents. In the Course Knowledge Base all of the links are prefixed by http// ,even local documents, so they carry an anchor tag of 1. 

Hierarchical Menu Structures As Teaching/Learning Environments

https://libjournals.mtsu.edu/index.php/jfee/article/download/1401/980

Hierarchical Menu Structures As Teaching/Learning Environments

Abstract

Similar works

Full text

Available Versions

Middle Tennessee State University: Journals@MTSU