Interaction Design for Course Website

Transcription

1 RESEARCH SCHOOL OF COMPUTER SCIENCE COLLEGE OF ENGINEERING AND COMPUTER SCIENCE Interaction Design for Course Website Jie Li U COMP SOFTWARE ENGINEERING PROJECT Supervisor: Prof. Tom Gedeon

2 Except where otherwise indicated, this thesis is my own original work. Jie Li Oct 2011 Comments, corrections, and other feedback are welcome at:

3 Acknowledgements Interaction Design for Course Website The semester journey towards the completion of my project and report would not have been possible without the help of some truly wonderful people who were always ready to help and support me. I thank my supervisor and client Prof. Tom Gedeon who offered his guidance and encouragement during the project. This work would be not having been possible without your supervision. Your patience, dedication and enthusiasm for this work got me interested in this field. I even set this field as my future career. Thank you again for your support. I would also like to thank Dr. Uwe Zimmer for his weekly project progress guidance and knowledge sharing regarding presentations and technical writing. I thank Ding Yun Zhu for his assistance and accompany us meeting every week giving useful suggestions and recommendations. I thank Tom Worthington s useful website giving me some idea about the IMS content package concept. I thank my family - your love and moral support throughout my post-graduate studies made this work possible. I thank my friend, Asad Sultan, Xi Ming Hou and Jie Wei, for their help and support. i

4 Abstract Most E-learning web sites make use of IMS Content Packages these days mainly because of its ease of interaction and flexibility, but the majority of the teaching web pages on the Internet are built using tools and components which have become obsolete now. To make them interactive and use IMS Content package, they either have to be created from scratch (re-created) or be used the way they are. This report presents the design of a new interaction style for a course webpage, starting with re-use of existing components. A navigation bar is created to allow students to see more contexts for the slide on screen than with the previous design. A tool was developed to convert from the previous design using standalone web pages to the use of IMS Content Packages in Wattle (Moodle). ii

5 Abbreviations Interaction Design for Course Website ANU The Australian National University CMS Content Management System IMS Instructional Management Systems Global Learning Consortium LMS Learning Management System Moodle Modular Object-Oriented Dynamic Learning Environment W3C World Wide Web Consortium Wattle Learning Management System s Local Name of ANU SCORM Sharable Content Object Reference Model iii

6 Table of Contents Interaction Design for Course Website Acknowledgements... i Abstract... ii Abbreviations... iii Table of Contents... iv 1. Introduction Overview Motivation Objective Background Existing website The Approach Taken Desirable Features Knowledge Programming Running Environment Requirements Requirements Interaction Improvement Uploading websites to Wattle Be able to reuse all existing websites Prepare and Research Requirements Analysis Analysis of improving website interaction Analysis of uploading website to Wattle Analysis of reusing all existing websites Requirements breakdown Structure Research IMS and SCORM Content Package Interaction improvement of Content package Existing Authoring IMS and SCORM and Exporting Tool iv

7 4.3.3 Advantage and Disadvantage Existing IMS and SCORM exporting Tool Selecting SCORM or IMS Content package IMS Content package component Design Interaction improvement design Uploading website to Wattle design Reusing all existing websites-design IMS content package design Implementation Find File Name by Reading.link File Extract Title Field from Each File Creating XML File Producing IMS Content Package Uploading IMS Content Package and display result Tool Generality Testing and Result Testing plain text Testing Image Testing Video Testing Radio buttons form Testing files form Testing Checkboxes forms Testing Result collection Conclusion and Future Work References v

8 1. Introduction 1.1. Overview This report focuses on how to make an existing web site more intuitive and interactive, so that less effort is required on the part of the lecturer to create slides and less effort is required on the part of students to understand lectures. It includes the design and implementation of a tool that makes it possible to convert existing course web pages into IMS Content packages so they can be integrated with Wattle Motivation E-learning, which involves the use of a computer or an electronic device with some methodologies to provide educational training or learning material, currently has a sharply increasing tendency in various education programs as the electronic and computer technologies develop [11]. Content Management Systems (CMS) are widely used in a large number of areas in recent years including online purchasing, blogging and one of the most important, online studying [12]. ANU is using the Moodle CMS to manage and operate the e- learning system to organize the teaching courses and materials in an ANU version called Wattle. Therefore, it is important to integrate e-learning system with the CMS to improve effectiveness for teaching and learning Objective A key goal is to improve the process of creating teaching slides (web pages) for a course which improves their usefulness to students and the lecturer without creating an extra burden on the lecturer to create them. A secondary goal is to allow reuse of existing content. COMP 8790 Software Engineering Project P a g e 1

9 2. Background In this section, we provide some background to the areas of this project, which includes analysis of the existing website, desirable features and commonly used terms Existing website The website is mainly used by the client (Tom Gedeon) for teaching the course COMP 1710 Web Development and Design. The client has taught this course for more than four years. Therefore, numerous web pages, which are the lecture slides, exist. The following figure 1.1 shows a screenshot of the existing website. The website can be found at the following address Figure1.1- Existing website Screenshot COMP 8790 Software Engineering Project P a g e 2

10 The original website was designed by a French designer (Pascal Vuylstecker) and the code comments are written in French. The website is developed and managed by a Perl program called ManyPage. After four years usage of this website, the client is quite familiar with ManyPage. Due to the complexity of ManyPage, there is still a barrier for the client to modify this code and customize it. However, there is an increasing need as the client publishes the webpage as the web development course. At the same time, uploading the numerous web pages to the University content management system (Wattle) poses a significant challenge. Therefore, it is very desirable for the customer to find some method for the modification of the existing website to satisfy the updated delivery methods, new university webpage style and so on The Approach Taken The existing website is predominately designed in ManyPage. ManyPage is an open source tool which is written in the Perl language. The client s original documents are written in plain HTML. ManyPage will maintain the website from plain HTML template to the rich template. In order to make the rich template, the plain HTML will be dressed (modified) by adding CSS, internal or external links and navigation between different pages, all added by ManyPage [2]. The issue is that the existing website is complicated to modify and requires understanding of the Perl language. For instance, a change such as the name of the navigate button is extremely hard, including to find the location of the code for the client. Furthermore, the whole dressed website does not work properly when it is uploaded in the current form on the content management system Desirable Features The desirable features involve customization of the webpage. The webpage code and language should be understandable and flexible. Hence, clients will be able to modify them whenever they need to do it. Also, importing a website to the content management system is another feature. Lastly, a desirable feature is to be able to reuse the existing material in the content system without requiring a page by page conversion to the different format. COMP 8790 Software Engineering Project P a g e 3

11 2.4. Knowledge Programming The previous website used Perl to develop the layout and the structure, so it is difficult for clients to improve the website. Hence, in this project with Moodle as the destination, the website is completed in HTML and CSS to structure the layout and PHP and Javascript to realize the main functions. In addition, in order to import the content from the old website to the new one, it is essential to use XML which is a key element for IMS to transform the entire description information to the new website. XML is constructed well by ECLIPSE Java Running Environment Requirements In order to make the whole project work, the following systems are required. The project is developed on Windows 7 which requires some extra elements to make programs run compared with Linux system environments. To allow the content management system, Moodle, to run, the system requires Apache, PHP, and MySQL. Those services can be either installed individually or by installing the entire package. This project uses the WAMP service for the window system. WAMP is able to build the required environment easily. Another environment requirement involved in this system is JDK. JDK can assist ECLIPSE java Indigo to work properly. Therefore, the project will need Apache, PHP, MySQL and JDK. COMP 8790 Software Engineering Project P a g e 4

12 3. Requirements Interaction Design for Course Website This section states the requirements of this project with regard to improving web site interaction and uploading web pages. These requirements are quite open-ended Interaction Improvement The project shall require improving the interaction between learner and content. The previous website did not provide a well-designed interaction between the lectures and the students. The website navigation only showed the previous and next slides, therefore, depriving students of the overall structure and context of the lecture slides. This application design shall tackle this issue and improve interaction and usability Uploading websites to Wattle The project shall require the contents of a folder of HTML files to be uploaded to Wattle, keeping the local links correct. It shall require investigation into alternative tools which can upload files to the Content Management Systems (Wattle). If able to upload the existing website to this system, students will find this lecture website more easily as the slides will be in the same system as the audio recordings, and will increase the chance for students to study this lecture. This requirement has the highest priority compared with all other requirements Be able to reuse all existing websites The application shall reuse the entire existing website without requiring users copying and pasting them to make new files. Therefore, the project shall involve investigation of whether the existing tools can implement this task. In the meantime, the project shall compare all frequently used tools to find out how they keep the existing website files without copying and pasting the existing website files to make new files. In case there is no such kind of tool that can perform this function, the project shall include the design of such a tool to carry out the task. COMP 8790 Software Engineering Project P a g e 5

13 4. Prepare and Research Chapter 4 will include the basic preparation and research which contains the analysis of all client requirements, the research required for the analysis and some useful information for design and implementation Requirements Analysis Analysis of improving website interaction For improving interaction between website and student, the client mentioned that the website navigation only shows the next slide name and previous slide name, which can only provide a connection between current, previous and next slides of a particular lecture. When students would like to study the lectures themselves, it is hard for students to understand the whole lecture structure and organization. For students to discover all lectures topics, they will be required to open all individual files themselves and step through all topics. To tackle this issue, the basic step is adding one slide navigation bar which demonstrates the whole lecture s slides structure Analysis of uploading website to Wattle The requirement of uploading the website to Wattle and keeping the local links correct has the highest priority compared with all other requirements. To be able to upload websites to wattle, it is necessary to investigate how it is possible to upload websites to a content management system. After finding and comparing many methods, the most suitable method was picked. In the market, there are some methods which have the main files uploading functions, for example, IMS content package for adding the source to the content management system (Figure 4.1), SCORM for loading the activity to the content (Figure 4.2) and loading files directly to Content Management System. COMP 8790 Software Engineering Project P a g e 6

14 Figure 4.1-Adding IMS content package resource Figure 4.2-Adding SCORM package activity However, loading files to the content management system does not maintain the local links properly. Therefore, two ways to achieve this are by using IMS content package and SCORM. Before any further investigation, either IMS content package or SCORM had to be chosen to fully satisfy client s requirements. The next step was to research whether there exists a tool that can make the IMS or SCORM content package from a set of webpages. Comparing all existing tools individual functions, advantages and weaknesses, we picked the most suitable tool for this function Analysis of reusing all existing websites For many tools, if users want to construct a duplicated website in a Content Management System, usually users will have to copy the content in every individual page from the original web site to the developing one, which makes it COMP 8790 Software Engineering Project P a g e 7

15 difficult and time consuming. In this project, a function is required which is called reusing all existing websites. It should duplicate the website in the Content Management System by uploading the entire website folder without requiring the user to copy and paste page by page. Hence, it is important to find a suitable existing tool to implement this function, or construct a tool if there is no existing tool, to achieve the function by taking a deep look inside the existing CMS structure to understand the fundamental architecture. COMP 8790 Software Engineering Project P a g e 8

16 4.2. Requirements breakdown Structure Figure 4.3- Requirements breakdown Structure COMP 8790 Software Engineering Project P a g e 9

17 4.3. Research IMS and SCORM Content Package A Content management system like Moodle does not produce or generate IMS or SCORM content packages. However, Moodle provides a platform for the learners and it allows learners to interact with IMS and SCORM content packages [12]. The figure 4.4 demonstrates that IMS Content Packaging allows content to be shared between systems such as authoring tools, repository and a Content Management System. Figure 4.4- CMS platform [12] In order to carry out the interaction between learner and material, it is necessary to build IMS or SCORM content package. The definition of IMS content package is defined by IMS Global and it is widely used to define the content packaging format. The SCORM content package also uses a content package to declare its packaging. Those packages provide the standardized set of structures which can be used to exchange content among Learning Management Systems [7]. In the market, there are some existing IMS and SCORM authoring software packages. They can be easily used for technical and even for non-technical users. Those tools include open source and commercial types for the project specification function. All those tools have their own advantages and weaknesses. In the following sections, three tools which will be discussed in terms of their functionality, properties and alter-ability Interaction improvement of Content package A content package contains content with sufficient information packed in the proper format and so it can encapsulate all required information, related resource COMP 8790 Software Engineering Project P a g e 10

18 and fundamental structure in a concise and easily browsed way [5]. In addition, a content package can better satisfy online learning community needs, and learning management systems provide the place for storing content packages. By running a content package on an online learning system, it can dramatically improve the interaction between learner and content. The relationship between learner and content package is shown in the following diagram. According to the diagram (Figure 4.5), we can see that people build the content package, the administrator manages the content package through an online learning management system and the learner learns the content by participating in the online learning community. Hence, building the content package on a base of a learning management system is essential for improving the interaction between learner and content. Figure 4.5- IMS Content Package Goal [5] Existing Authoring IMS and SCORM and Exporting Tool Regarding functions which IMS and SCORM have, it is necessary to build the IMS and SCORM content packages. Currently, there are some tools which can create COMP 8790 Software Engineering Project P a g e 11

19 IMS and SCORM packages. These tools have two types, free Open Source and commercial. Both types of tools are used by various clients [1]. However, commercial tools, which are used for company and big organizations, are mostly very expensive. For normal users, many users choose free open software. This is relevant to a University environment. Therefore, there are three open source tools to discuss: exe, Xerte, and the ACONTENT Open Source package [7] Advantage and Disadvantage Existing IMS and SCORM exporting Tool Exe, Xerte and ACONTENT, these three open source packages are popular for exporting the IMS and SCORM packages by using those tools. However, each of them has its strengths and weaknesses. Here, we compare the ups and downs, to select one tool which satisfies the client needs. EXE, Xerte and ACONTENT tools have advantages in the following parts: 1. Able to make the IMS/SCORM content package easily 2. Able to upload to learning Management System 3. Able to have content menu as navigator However, EXE and ACONTENT can modify web page's CSS separately; Xerte cannot modify individual pages CSS easily. Moreover, ACONTENT and Xerte can link each slides together and also have next and up buttons. However, EXE cannot carry out this function. The weaknesses of EXE, Xerte and ACONTENT tool are: 1. Need to make the original website by using copy and paste many times. 2. Need to name each slide as the part of navigation bar 3. Need to build the navigation bar manually Furthermore, Xerte and ACONTENT are very hard to install. Xerte needs to modify a multitude of configuration files and also create an online account. Only people who hold ending with "gov", "gov.uk", "sch.uk", "ac.uk", "org", "org.uk" and "mod.uk" can create a new account themselves. Otherwise, they require sending details to helpdesk@techdis.ac.uk[9]. Once it is approved, then you can use Xerte. ACONTENT needs Apache, MYSQL, and PHP tools' support. In order to install ACONTENT, the computer should have installed Apache, MYSQL, and PHP first. It is time consuming to set up and use Xerte and COMP 8790 Software Engineering Project P a g e 12

20 ACONTENT. Compared with those two tools, EXE is much simpler to setup and use. From the tools mentioned above, none of them fully satisfies the clients needs. Therefore, the only solution for this is to construct IMS or SCORM Content package directly to satisfy the requirements of the client Selecting SCORM or IMS Content package Both SCORM and IMS content package can convert the learning content into Content Management System. However, these two content packages focus on the different package objects. According to my research, SCORM focuses on packaging the content for discrete learning objects. While IMS content package is used to combine all available resources together. In addition, the purpose of IMS content packages is more on learning processes, not only content but focusing on reusing materials in different environments [10]. Regarding the client requirements, the client is hoping to improve web interaction and is more focused on the learning process. Hence, between SCORM and IMS, the better option for the client is the IMS content package. In the following part, it will be required to investigate some information about IMS content packages IMS Content package component An IMS Content package contains two top-level elements: a mandatory XML file describing the package itself and the file resources being described by the XML. The mandatory XML file is called an IMS Manifest file (a manifest was the list of items in the hold of a ship, i.e. contents. [5]). Furthermore, the Manifest XML file components involve a Meta-Data section, Organization section and Resources section. The function of the Metadata section is storing the whole data information description. The structure of the IMS content package mainly depends on the Organization section. The resources section aims at listing all the resources which can be hyperlinked to external web resources as well as actual files in the package [5]. Additionally, the resources in the Manifest have various types which can be images, HTML file, videos and word documents. About content components, it can be Media, other files, and assessment [3]. Further details can be seen in the following figure 4.6. COMP 8790 Software Engineering Project P a g e 13

21 Figure 4.6- Content package Component [3] COMP 8790 Software Engineering Project P a g e 14

22 5. Design 5.1. Interaction improvement design There are two main ideas about the design to improve interaction; demonstrating the main topic of all slides in each lecture and constructing the lecture website using the Moodle Learning Management System. In order to carry out this first idea, we designed a navigation bar for each of the websites. A navigation bar about a lecture not only tells you each slide s topic but also can guide through the lecture hierarchy and their relations between each website. Constructing the website for the content package system, Moodle, this design idea can dress the website with Moodle theme, whereas the layout and structure of website can match with Wattle. The design idea is shown in the Figure 5.1. Figure 5.1- New layout for a lecture website In real lecture, the name of the testing Wattle site, Tom Gedeon s Sandpit, will be replaced by COMP1710- Web Development and Design- Sem in Wattle. COMP 8790 Software Engineering Project P a g e 15

23 Figure 5.2- current layout for a lecture website In the new website, on the top, there is a banner with an ANU theme (shown in Figure 5.1), while the old website (Figure 5.2) does not tell users that it is an ANU website, which is bad web design practice as well as breaks ANU web page guide lines. Moreover, the new website has a navigation bar on the left of the page which could help users understand the content of each slide better as well as to select any page to display without going back to the page in the upper level. The old website does not have such as a navigation bar, instead using next and back links Uploading website to Wattle design To be able to satisfy the client requirement about uploading the whole website to wattle, the design needs to satisfy three parts. Firstly, it should transfer the entire content of each original set of webpages. Also, the content structure and the content itself should be the same as the original one. Additionally, the change in the title should be updated immediately while uploading. In order to make the first part work, the design should upload the entire website once rather than copying and pasting every individual file. The original website has.link files to specify the sequence of files to ManyPage. The.link file will be parsed, the order of HTML extracted; this will let the system know which HTML needs to be put COMP 8790 Software Engineering Project P a g e 16

24 into content package. In that case, a new process will copy those HTMLs only once to the content file. As long as the system can upload the whole file, this method will upload the entire website requirement once, without copying and pasting every individual file. On the other hand, to update the title immediately while uploading, all individual webpages must be parsed to extract the title from all the pages. All individual web pages are thus opened automatically and also the title of all web pages will be extracted Reusing all existing websites-design According to the previous sections on preparation and research, the function to use all existing websites can be satisfied by the IMS content package. IMS content package can be produced by authoring IMS tools. Since none of the authoring IMS tools produce results of the kind which the client requires, the only way to solve this problem is design the IMS content package directly. In order to design IMS content package from scratch, it is important to have a deep look inside the IMS content package fundamental components. Then, divide components to even smaller parts, and then build the smaller parts individually. After investigation into IMS content package components, we can now draw the fundamental component diagram. COMP 8790 Software Engineering Project P a g e 17

25 5.4. IMS content package design Figure 5.3- IMS Content package design whole process [3] From the above diagram (Figure 5.3), we can see that the Manifest is a vital part of the whole IMS content package design. The content part is only related to the Physical Files, so design procedures here are mainly focused on designing the Manifest part. Starting with design of the Manifest, the Manifest file usually has the standard name imsmanifest.xml in all lowercase letters. To design XML binding, it contains <manifest> elements first, which will only occur once. The attributes of this top-level manifest mainly have identifier, version (optional) and xml: base (optional) [4] which is shown in the figure 5.4. The function is to provide an identifier to identify the unique manifest. Version is very useful to distinguish between manifests which have the same identifier. The xml: base gives a relative path offset for the content files. COMP 8790 Software Engineering Project P a g e 18

26 Figure 5.4- Top level <manifest> elements [4] Next is the metadata part which can appear one time, or not at all, with a <manifest> element. The elements of metadata are demonstrated in Figure 5.5. Figure 5.5- Metadata elements [8] In our project, we try to simplify its structure; <imsmd> information can be put in the top-level <manifest> part. Therefore, the top level <manifest> information and metadata is combined together. It looks like the structure in Figure 5.6. COMP 8790 Software Engineering Project P a g e 19

27 Figure 5.6- Project <manifest> elements [4] Next, the focus is on the <organizations> sections. One or more structures or organizations generally occur [4]. Design of this part was carried out cautiously to find out which kinds of structures were needed in the navigation bar. This organization structure decides the layout and hierarchy. Besides, the title of the item should be by our design of individual webpage titles, which will be shown in the navigation bar. The organization section s attribute is shown in Figure 5.7. COMP 8790 Software Engineering Project P a g e 20

28 Figure 5.7-<organizations> sections elements [6] In addition, design of the <resources> part was done to declare the content files. So the resource elements are mainly useful for collecting content files. Finally, combining all the individual design parts in one diagram would end up in Figure 5.8. COMP 8790 Software Engineering Project P a g e 21

29 imsmanfest.xml Figure 5.8- imsmanifest.xml attributes [6] COMP 8790 Software Engineering Project P a g e 22

30 6. Implementation 6.1. Find File Name by Reading.link File A.link is a special file used by the client to list the names of the websites in a particular order. This ordered list make up the flow of a particular lecture. In order to present a simple navigation feature that links lectures seamlessly we built a program which can parse a.link file contained within an existing website folder. The.link file has guiding information for both the programmer and builder. The Client only needs to put the names of the webpages in an order and the project function will simply read the.link file in the program and extract the file name which will then be used by the XML builder. All these webpages will be saved in one specific folder. This folder is the content part of IMS Content Package. The format of.link is demonstrated in Figure 6.1. To use this program to build our own IMS Content Package, the first step is building information in the same format as Figure 6.1. Figure 6.1-.link format COMP 8790 Software Engineering Project P a g e 23

31 6.2. Extract Title Field from Each File A navigation bar is built for delivering the topics of a whole set of slides for students who can see the titles of not only the previous and next slides, but also fully understand all slide connections. In order to build this kind of functionality into the navigation bar, a program was built which can open the individual files and extract the title from the title tags. The result of this process is shown in Figure 6.2. This result will display in the same order as the content shown in the navigation bar. Figure 6.2- Extract title result 6.3. Creating XML File Using the Java program written for this purpose, the following mentioned libraries build the imsmanifest.xml. According to the Figure 6.3, the project will involve an XML parsers library, W3C document library and Apache library. COMP 8790 Software Engineering Project P a g e 24

32 Figure 6.3- Library resources used in building XML These library resources and Figure 6.4 s xml structure are used to build the imsmanifest.xml structure and content. COMP 8790 Software Engineering Project P a g e 25

33 Figure 6.4- xml files design structure [3] 6.4. Producing IMS Content Package Producing the IMS content package is the last step which uses the imsmanifest.xml, HTML file contents and CSS. The programs produce an imsmanifest.xml file in the same location as the content files. By using a compression tool to zip these three individual parts together, the IMS content package is completed. COMP 8790 Software Engineering Project P a g e 26

34 6.5. Uploading IMS Content Package and display result Turning on the editing function in Wattle allows adding sources to Wattle. The adding the IMS content package option is then selected to load the package Tool Generality The tool uses the simple.link format but could be easily modified to use a simple list of web page names, used in a general way to construct IMS Content packages from many existing pages using a simple specification. COMP 8790 Software Engineering Project P a g e 27

35 7. Testing and Result 7.1 Testing plain text Testing a plain text format (existing website) by loading it into IMS content package is shown in Figure 7.1: Figure 7.1- plain text webpage After uploading the existing plain text webpage to Wattle, it should display properly in the content management system. The result of uploading the webpage to Wattle is shown in the following Figure 7.2. COMP 8790 Software Engineering Project P a g e 28

36 Figure 7.2- The result of uploading the normal webpage to the Wattle by IMS 7.2 Testing Image Figure 7.3 shows the HTML with image to be loaded into the IMS content package Figure 7.3- HTML with image COMP 8790 Software Engineering Project P a g e 29

37 The resulting IMS content package, with picture, is shown in the Figure 7.4. According to the following diagram, we can see that the picture displays correctly in Wattle from the content package. Figure 7.4-The result of uploading webpage with picture to the Wattle by IMS COMP 8790 Software Engineering Project P a g e 30

38 7.3 Testing Video Figure 7.5 contains a video to be uploaded to the IMS Content Package: Figure 7.5 website with video The video is loaded successfully; the result is shown in Figure 7.6 and we can see that the video shows up and plays correctly in Wattle with the assistance of the IMS content package. COMP 8790 Software Engineering Project P a g e 31

39 Figure 7.6-The result of uploading webpage with video to the Wattle by IMS 7.4 Testing Radio buttons form Uploading a webpage, via an IMS content package with Radio buttons to Wattle works successfully in Moodle and is displayed in the following diagram (Figure 7.7). The radio buttons work correctly and allow a user to select different options as is illustrated in Figure 7.8. COMP 8790 Software Engineering Project P a g e 32

40 Figure 7.7-The result of uploading webpage with Radio buttons to the Wattle by IMS Figure 7.8 -The result of selecting the second choice radio button COMP 8790 Software Engineering Project P a g e 33

41 7.5 Testing files form Interaction Design for Course Website Adding a webpage, which has a File choosing form, and uploading it via IMS content package, results can be delivered to the specified webpage using the files selection form and this works correctly in Moodle. The Figure 7.9 shows the outcome of uploading the webpage to Moodle. Figure 7.9 -The result of uploading the website with files form to Wattle by IMS The IMS content package not only displays the specific webpage properly on Moodle but also allows the choosing File and Sending buttons to work. Figure 7.10 show that the choosing file button opens a dialog box to allow the selection of an actual file. COMP 8790 Software Engineering Project P a g e 34

42 Figure 7.10 Click the choose file button 7.6 Testing Checkboxes forms Loading the webpage checkboxes forms to Moodle by IMS content package works properly. The details are shown in Figure On Moodle, you can check or uncheck the box whenever you want. Multiple selection is illustrated in Figure COMP 8790 Software Engineering Project P a g e 35

43 Figure The result of uploading the website with checkboxes form to Wattle by IMS Figure 7.12 Test checkbox s multi choice COMP 8790 Software Engineering Project P a g e 36

44 7.7 Testing Result collection The following table (Figure 7.13(a) (b)) displays the results collection from the actual test. The Details column contains additional information about the fundamental requirements for clients during testing. Supposed to have Actually Details Parse.link file and build IMS content package IMS content package working properly in Wattle Navigation bar to display all slides topics Function of Program reads.link file and creates imsmanifest.xml automatically IMS works very well in Wattle Navigation bar is shown in the left corner of website Client required to wrap imsmanifest.xml file with content Client simply needs to select adding resource function to load IMS content package Client just needs to create.link following the instructions Website can display plain HTML in Wattle Website can display HTML with images in Wattle Website can display HTML with video in Wattle In the learning management system, the webpage has additional content and structure compared to an existing plain webpage In Wattle, it displays the same image as with the existing website In Wattle, it plays same video as in the existing website Client required to put the HTML file to the same location as the.link file Client required to put the image file to the relative location specified in the HTML file Client required to locate the video file to the relative location specified in the HTML file Figure 7.13-The result of testing collection (a) COMP 8790 Software Engineering Project P a g e 37

45 Supposed to have Actually Details Website can display HTML with radio button form in Wattle Website can display HTML with Files form in Wattle Website can display HTML with checkbox form in Wattle In Wattle, radio button can be chosen and work correctly In Wattle, selecting file button can be chosen and works correctly In Wattle, selecting file button can be chosen and works correctly Client only needs to put this into the HTML file as standard for a webpage Client only needs to put this into the HTML file as standard for a webpage Client only needs to put this into the HTML file as standard for a webpage Figure 7.14-The result of testing collection (b) COMP 8790 Software Engineering Project P a g e 38

46 8. Conclusion and Future Work Interactivity and usability is one of the key aspects of modern web design and architecture. A large amount of effort is required to come up with a usable design for an E-learning website, given the many constraints from the tools and systems already in place. This report described the design journey from a very general user requirement to selection of the IMS Content package as a delivery mechanism. The IMS Content package version of the web site offers improved interaction between the student and the material for study, and between the lecturer and the material for teaching, thereby, improving upon the design weaknesses of the existing web site currently in use. Future Work Future extension of this development should include: Investigate image/video storage outside IMS Content package. Currently image/video is stored inside the content package. Test/evaluate whether the new design is better than the original one with an experiment with a number of users. Test/evaluate the menu design; whether a complete menu tree is better than a three item menu (previous, current, next). This would allow a conclusion whether a broader context from the navigation bar is truly useful. These would further improve on the design, ease of use and interactivity of the site. COMP 8790 Software Engineering Project P a g e 39

47 References [1] Creating SCORM Content (2011), viewed by 20 September 2011 < [2] Manypage (2008), Pascal Vuylsteker, viewed 22 August 2011 < [3] IMS Content Packaging Information Model (2004), viewed by 17 September 2011 < [4] IMS Content Packaging Best Practice and Implementation Guide( 2004), view by 1 September 2011 < [5] IMS Content Packaging Summary of Changes v1.1.4, C.Smythe, A.Jackl, IMS Global Learning Consortium, Inc., October [6] IMS Content Packaging XML Binding v1.1.4, C.Smythe, A.Jackl, IMS Global Learning Consortium, Inc., October [7] IMS Learning Design (2003), viewed by 13 October 2011, < [8] IMS Meta-data Best Practice Guide for IEEE Standard for Learning Object Metadata v1.3, P.Barker, L.Campbell, A.Roberts, IMS Global Learning Consortium, Inc., May [9] JISC TechDis Xerte Sandpit (2010), viewed by 25 September 2011 < [10] SCORM and IMS Learning Design(2004), Michael, viewed by 27 September 2011, < [11] What is E-learning(2011), viewed by 5 September 2011, < [12] What is IMS content package (2002), S. Wilson,S. Currier, viewed by 24 September 2011 < COMP 8790 Software Engineering Project P a g e 40