An advanced web site was created that combined the best features of HTML, CSS, JavaScript, Java, PHP, and XML into a menu-driven program for the presentation of college-level course notes and practice quizzes. The PHP programming language was used on the server-side to coordinate the other technologies. PHP Perl-like regular expressions were used to parse the XML quiz documents and the HTML notes documents and prepare them for display. JavaScript on the client-side enabled the use of drop down menus when combined with CSS. In addition, JavaScript was used to provide instant feedback on quizzes and to manage cookies used in scoring.
Flexibility is the key feature of this program. By changing the headings in the file menuItems.php and by changing the logo.jpg banner, this dynamic program is ready to serve up material for a different course. In addition, the material can be introduced gradually with menu items added on as the course progresses. Likewise, the course notes, which are written in plain HTML and the quiz files can be added on as the course progresses.
A previous project idea was to develop a web site to support the courses I teach at Mansfield University of Pennsylvania. I chose CIS 3330 Computer Organization as the first course to implement. I envisioned a site that would have web-based tutorials and practice problems. However, as got into coding the site I found the focus of my design was changing from developing a single fixed site to developing a dynamic site that can be easily changed as the course progresses and easily set up for many different courses. Therefore, my project became a foundation on which I can now easily build any of my courses.
I knew I wanted a menu driven design. The choice was between sliding side menus and drop-down menus. I decided to go with the drop-down menus primarily because I found an excellent site on the web that shows step-by-step how to do this. Hence, much of the look and feel of the top part of my site is from www.jessett.com. The drop-down menu system uses Cascading Style Sheets (CSS) and JavaScript to show and hide each menu layer as directed by the user's mouse. When a drop-down menu topic is selected, a page of notes on that topic is loaded into main screen area.
There are several buttons of the left side of the screen. These control the online practice quizzes. When the user clicks "Quiz Me" a random quiz question on the selected topic is loaded into the main window. Each quiz has a textbox for the user to type their answer. When they click the "Grade It" button, the site gives immediate feedback on the answer. These buttons were first implemented with the Dreamweaver Flash button wizard. However, I found that the drop-down menus would appear behind the Flash buttons no matter how I set the Z property. I really liked those buttons, so I screen-captured them and edited each one using Fireworks. Then I implemented them using Dreamweaver's rollover button wizard. Now no Flash pluggin is necessary and the menus work correctly.
A scoreboard on the left side of the screen keeps track of how the student is doing on the practice quizzes. As this is just practice, the student can click the "Reset Score" button at any time to set the score back to zero. The scoreboard is implemented with a rather complex bit of JavaScript and PHP code. JavaScript grades each quiz question and the updates the scoreboard. This is done on the client side so that feedback is instant. The scores are maintained using cookies.
The site was first designed without any PHP code. This might have worked okay if the site were to be fixed and unchanging. However, I want to unveil the material for the course each week. Therefore, I need a site that is flexible and easy to change. PHP allows for this kind of flexibility. With PHP, I can algorithmically generate the menus. All of the menu headings are found in one place; a file named menuItems.php. It is a simple matter to edit this file and add on menu items as the course progresses.
The JavaScript code and the PHP code work hand in hand. JavaScript is used for those tasks best suited for the client while PHP handles the server-side. JavaScript handles drop-down menus, rollover buttons, quiz grading, and setting the scoreboard. PHP parses the HTML notes files and the XML quiz files and presents them as appropriate. PHP presents the quiz questions in a random order and sets up the answers so that JavaScript can grade it correctly. As mentioned before, PHP reads the menuItems.php file and uses that to dynamically construct the necessary HTML and CSS menu code.
The code is organized as follows:
nav.php is the main program that generates the web site. It is called over and over, with parameters that tell it which set of notes or which quiz to display for the user.
menuItems.php contains all of the menu headings. This file is read in by nav.php and used to dynamically generate the menus.
getnotes.php reads in and displays the class notes for the menu item selected. Each set of notes is stored in a separate HTML file. This program strips off the code before and after the <body> tags so that the contents can be displayed properly within the nav.php main window.
quiz.php reads in XML format question/answer sets for the selected topic. It parses the file and gives a random order to the questions and saves the order in a cookie. As each question is presented to the user, the cookie is modified so that that question will not be asked again. When all of the questions have been asked, a new random order is generated.
main.css contains the cascading style sheet for the site.
nav.js contains the drop-down menu code from www.jessett.com
I went to www.domainmonger.com and found that my course number (cis330) was available. I plunked down the $17 and registered the domain. Then I reserved web-hosting space at www.linuxwebhost.com at the rate of $7 per month. Back at domainmonger.com I logged in and set the Name Servers to point to my new site at linuxwebhost. The primary server Hostname was set to ns.the-web-host.com and the secondary server Hostname was set to ns2.the-web-host.com (these are the names of the name servers located at linuxwebhost.com). Within about 24 hours I could then type www.cis330.com and reach my new web site. I moved my rough draft HTML, CSS, and JavaScript code over to the server and proceeded to write, test, debug, and document the PHP code.
Based on feedback from a fellow TS7010 student, I fixed the JavaScript scoreboard error and changed the top links so that they open in the same window rather than in a new window. As I add content, I will investigate the use of the Atomz search engine. In the future, I would like to explore making the interface even more flexible. Currently the main menus are limited to the range of 1 - 7. However, by adding a bit more code (variable table column widths that are now fixed at 14%), the menus could easily range from 1 to 20.
I look forward to using this site in my future classes. With actual use, I will be able to refine the interface. Furthermore, I look forward to developing a set of menu-driven support tools for the site. For example, I could have a nice web-based interface that lets me configure the drop-down menus. Likewise, I could have a quiz editor to help me develop the XML-based practice quizzes. In the future, the quizzes may develop beyond the simple single textbox answer into other more interesting forms. For the time being, the main task will be to write all of the notes that are needed in the class. But that job can stretch out over all of fall semester.