A Basic Strategy for Incorporating Lecture Notes with Audio-Visuals of Practical Activities to Foster Online Electronic Learning Implementation in Studio or Laboratory-Based Institutions ()
1. Introduction
The increasing quest for tertiary education in Ghana has assumed an overwhelming magnitude in recent time, mounting pressure on public university management to increase enrolment. This has led to overwhelming student population, overstretching physical learning facilities in various departments on public university campuses. Many students, though eligible for enrolment, loose the opportunity due to constraints with learning facilities. In some institutions, course instructors split their classes into groups to achieve manageable class sizes, which end up disrupting the normal duration for academic work thereby negatively affecting skill acquisition.
The online electronic learning system that facilitates distance education has become a panacea in many institutions for overcoming these challenges. KNUST for example, is rigorously pursuing this system of online electronic learning to facilitate distance education so it can avail tertiary education to many eligible students who are unable to secure admission through the regular enrolment scheme. The university, on the 2nd of September 2022, commissioned state of the arts electronic learning facilities to enhance this drive. This move has challenged various departments to migrate some of their courses unto the online system. Unfortunately, departments with studio or laboratory oriented programmes have difficulty exploiting the full benefits of this system due to lack of expertise for appropriating best strategies for delivering studio, field practical or laboratory practical activities on online electronic learning platforms. This challenge is not peculiar to KNUST.
It is critical to note that most educational institutions in developing countries that run distance educational programmes relate more with theory-based courses whose learning materials are easy to package and delivered on online platforms. Use of document files in text form has been the predominant mode for delivering instructional and learning materials of such theory-based courses to learners. Since this technology has a limitation of the capacity to deliver practical skills effectively to the learner, it has been very challenging for institutions whose courses are predominantly studio, laboratory or field practical based, to incorporate audio-visuals of their practical activities to facilitate problem-based learning on online platforms. This was the motivation of the author of this paper who is a member of the local task force of the Erasmus + Project in Ghana, trained with the expertise for using electronic learning strategies for enhancing problem-based learning.
This paper discusses a simplified strategy for enabling the delivery of electronic learning resources that incorporates lecture notes with audio-visuals of practical and demonstrational activities in a web browser, to foster online electronic learning implementation in studio or laboratory-based institutions. This scheme was adopted in bringing field practical activities of the Department of Fisheries and Watershed Management in the Faculty of Renewable Natural Resources (FRNR) into the virtual classroom space to enhance practical skill acquisition without embarking on field trips to acquire such skills. The main objective of this paper is to create the awareness of the possibility for course instructors with background knowledge in website designing and most importantly, web developers in studio or laboratory-based institutions to foster electronic learning implementation in their institutes.
2. Electronic Learning
Electronic learning, popularly referred to as e-learning, is the use of networked information and communication technology in carrying out the educational activity of teaching and learning. A number of terms are used to describe this mode of teaching and learning. They include; online learning, virtual learning, distributed learning, network and web-based learning. These modes help to provide quick delivery of learning resources to students. This method of learning is judged to be the best suited for everyone (Chitra & Raj 2018) .
During the 1980s, the compact disc (CD) began to be used in education, but the fact that it lacked the quality of providing the required interaction between the student, the material and the teacher, it was regarded as a flaw in the opinion of a number of educators. This problem was only resolved with the appearance of the Internet which fulfilled the essence of facilitating synchronous interaction in e-learning. The student, in e-learning, is now able to access educational materials at any time and from any place, thereby transforming the concepts of the educational process and learning to go beyond the limits imposed by traditional classrooms into a rich environment with numerous resources for learning (Gul, 2015) .
In a paper that dealt with major challenges of e-learning in education, Arkorful & Abaidoo (2014) emphasised that not all fields or discipline can employ the e-learning technique in education. They specifically made mention of the impossibility for purely scientific fields that include practical activities in their pedagogical schemes to study such practical courses through e-learning. They backed their discussion with the fact that many researchers have argued that e-learning is more appropriate in social science and humanities than the fields such as medical science and pharmacy, where there is the need to develop practical skills. Evidently, over the years, practical-based programmes in Ghanaian higher educational institutions have not been able to successfully run such programmes by e-learning modes. Programmes, which have been modelled for online studies in facilitation of distance education, have been the theory-based fields.
Distinguished educational experts like Basantia (2018) have also intimated the difficulty in running practical-based course through electronic mode in India. In his article “Implementing Practical Based Courses under Open and Distance Learning System: A Study of the Perception of Learners and Counsellors” Basantia revealed that the emergence and the use of information and communication technology (ICT) made open and distance learning mode effective in delivering courses in disciplines which need intensive practical and face to face situations. In spite of the potentialities of the media and self-learning nature of the instructional/training modules, many obstacles have been encountered in teaching practical-base courses like courses in Science and Technology, Agriculture, Nursing, Medicine, Vocational Training and so on. Several Indian institutes of higher learning are offering practical based courses at Bachelor’s, Certificate and Diploma levels through distance mode. The print medium is still the primary substitute of the teacher in both the theory and practical-based courses. He concludes that the teaching of practical skills poses considerably more difficulties than the teaching of knowledge and theory.
3. Implementation Difficulties
Undoubtedly, many tertiary course instructors lack the expertise for electronic learning material development that incorporates both practical and theory based learning resources. This is because the technology for achieving this requires a composite knowledge in video production, web designing and a web development. Hence, it is only by the collaborative expertise of a video producer, web designer and a web developer that this can be achieved. The system requires crystal-clear audiovisuals of practical activities for educational purpose, and a user-friendly architectural layout characterised by a well-enhanced interactive functionality.
The author’s expertises to handle all the above skills enabled the development of this e-learning website that is benefitting DFWM in the Faculty of Renewable Natural Resources at KNUST in Kumasi. The author is in this paper creating the awareness of the possibility for course instructors with background knowledge in website designing and most importantly, web developers in studio or laboratory-based institutions to foster electronic learning implementation in their institutes. The paper discusses a basic strategy for delivering learning materials that incorporates text and audio-visual materials on online platforms to facilitate e-learning in studio or laboratory-based institutions.
4. Methodology of the Study
The study is characterised by the practice-led scheme (DCU Library, 2022) , which is one of the methods under Design-Based Research (DBR). The essence for adopting this scheme was because of the author’s quest to employ computer application software to fashion procedures for demonstrating the technological knowhow for developing a basic e-learning system for delivering learning materials that incorporates text and audio-visual materials on online platforms to facilitate e-learning in studio or laboratory-based institutions. The materials are easily accessible and downloadable on smart phones as well as any computer system. This strategy is in line with various underpinning concepts, which emphasise the positive impact that the use of electronic instructional and learning tools should have on student learning, and help to improve both practice and research in educational contexts.
Researchers like Kennedy-Clark (2013) and Scott et al. (2020) encourages the use of methodological approach in addressing learning problems using instructional tools that can be tested to see their positive impact on student learning. In addition, Anderson and Shattuck (2012) stress the need for theory building and development of design principles that guide, inform and improve both practice and research in educational contexts using DBR schemes. This was the motivation for developing this simple interactive e-learning system to deliver essential multimedia learning elements, (sound, audiovisuals and text) to foster e-learning in DFWM to impact on students learning and research experience. Two-(2) computer application softwares were used for this study. They are, Adobe Dreamweaver CS6, an Integrated Development Environment (IDE) software and TechSmith Camtasia Studio version 2018.
4.1. Adobe Dreamweaver CS6 Capabilities
Adobe Dreamweaver CS6 is a software for web designers and web developers. It provides excellent tools that enable web designers and web developers to build interactive e-learning sites that can deliver all the major multimedia learning elements, which are sound, video, text and still pictures from a single interface.
A Web Designer is a graphic artist who is responsible for designing the layout, usability, and visual appearance of a website. Successful web designers must possess an array of creative, graphic, and technical skills. Their role revolves around creating the layout and visual aspects of a website. They make sure the site is both visually pleasing and user friendly and encourages visitors to stay around for as long as possible. Web Developers build and maintain the core structure of a website by converting the web design into a bug free functional website, using coding languages such as HTML, JavaScript, PHP, and Python CSS (Sergei, 2021) .
In this project, the framesets architecture was used to design the website with the use of two language systems; Hyper Text Mark-up Language (HTML) (Domantas, 2022a) and JavaScript programming language (Domantas, 2022b) . The framesets architecture was used because there was the need to display multiple views in the same interface so that some views will be made static whilst others will scroll independently from the others or the content replaced without affecting the entire interface. Developing a website with framesets not only make website well organised but allows users to access the information more easily (O’Leary & O’Leary, 2000) .
4.2. Techsmith Camtasia Studio Version 2018
Camtasia Studio is a software for creating and editing videos for educational purposes because it offers tools for incorporating annotated documents to facilitate Distance Learning on the Web platform. The videos from Camtasia display with crystal-clear effect at any screen size on Web pages, blogs, CDs, or portable devices like the iPod. It also offers tools for computer screen recordings that can capture cursor movements, menu selections, pop-up and typing, and any other action seen on the screen. In addition to screen recording, Camtasia recorder allows the user to draw on the screen and add effects while recording (Kennesaw State University, 2017) .
Camtasia edits videos and render in MP4 Smart player “HTML5” format for easy accessibility on smart phones aside the usual web browsers. It attaches to each MP4 video file, cascading style sheet (CSS) document, an Extensible Mark-up Language (XML) Document and JavaScript to control the behaviour of the video in a web browser and on a smart phone. Camtasia Studio also has tools to separate audios from videos and render them in either wave file (wav) or mpeg-4 audio (m4a) file formats which can easily be converted into mp3 format using switch sound file converter for live streaming in internet browsers. This is the justification for choosing Camtasia for this project against all the other available video creating software.
5. Results and Discussion
5.1. Managing File Directory
The first important requirement in web designing is management of directories of folders that will store various database files to hold the learning resources. It is first advisable to presume the local disk (C) as the remote server to nest the root directory, with a name that identifies the course e.g. ‘FRNR_Lmat. The root directory should nest sub directory folders, to store media files & frame page files, for the website as well as HTML files, PDF’s and media files for learners. The index file should be saved in the root directory folder as a matter of importance. Figure 1 displays the tree structure of the directory folders for such a project. It is advisable to use non-spaced words to name the folders. There is no rigid mode of organising the directory folders. It is however important to ensure that the locations of the folders and files are never changed in order for hyperlinks to function effectively when the root directory folder is uploaded to the remote server.
In website designing, a link is a connection from one Web resource to another by the use of link tools (Williams & Sawyer, 2005) . This is to say that link tools are the instruments for rendering a document its interactive functionality. To network a system of gadgets is to link them so they can communicate with each other over modems. In Dreamweaver, the link tools constitute Anchor text link and hyperlink.
● An anchor text link enables you to create a link to a certain part or section of a webpage and not just have it load from the top of the document. This is achieved by creating a named anchor to that section of the page before a text is linked to the named anchor.
● Hyperlink is a technology for performing interactive actions in an HTML document so that users can navigate from one webpage to another Web page.
Ones the directories are well organised, the effectiveness of the links are assured.
5.2. The Frameset Layout
Documentary procedures on how to create framesets are available on many online platforms. One of these procedures for creating very simple frameset layout in Dreamweaver is provided by Adobe (2021) . Figure 2 describes the author’s frameset layout of the site architecture for this project designed in Dreamweaver. The site displays a static banner frame, a scrollable navigation frame, a scrollable content frame and a scrollable course instructor’s frame.
1) The static “Banner Frame” should display the identity of the institution.
2) The scrollable “Instructors Frame” should display the identity of the course instructor(s) with a link for the learner to send feedback to the instructor through their email address.
3) The scrollable “Content Frame” should be reserved for displaying lecture notes embedded with a link to stream accompanying audio-visuals.
4) The scrollable “Navigation Frame” should be designed with a Tab to display a Search Engine window, Table of Content window, Alphabetic Index window and a Help window.
Figure 3 is the screenshot view of the website interface. This was constructed and formatted with Hyper Text Mark-up Language scripts in Dreamweaver.
5.3. Designing of Frameset Layout
Adobe Dreamweaver CS6 offers a user-friendly interface for designing a webpage using the major coding languages such as HTML, JavaScript, PHP, CSS, coldFusion, XML etc. Below is a basic procedure for using frames to design a website, which was adopted for the interface in Figure 3.
1) Open Dreamweaver CS6 and create a new html page type from the new document dialogue box.
2) Assign an electronic learning name to the page.
3) By default, Dreamweaver interface will show “Code”, “Split”, “Design” and “Live” panels. Select Split to show both Code view and Design view.
4) Insert frames (Figure 4). To do this, insert the insertion point in the design view and go to Insert menu > HTML > Frames, and select the frame position as follows:
a) Insert a topFrame, which will automatically insert the mainFrame at the bottom with a “Relative Row Value”.
b) Click within the mainFrame and insert a leftFrame to the mainframe area.
c) Whilst the insertion point blinks in the mainframe, insert a rightFrame.
5) Save the individual frames with unique names (Figure 5) into the frame directory folder. To do this, insert the insertion point in each frame, go to File menu > Save frame, to open the Save as dialogue box. Locate the frame directory folder and save the frames as HTML files. The topFrame can be saved as “banner”, the mainFrame as “content” the leftFrame as navigation and the rightFrame as “instructor”. They become the Source files “Src” to the respective frames.
6) Save the frameset with the name “Index” in root directory folder. To do this, hover the arrow cursor on any of the borders of the frames to display the resize cursor, and then click. This will display the frame set properties in the properties inspector. Go to File menu > Save frameset, to open the Save as dialogue box. Navigate to the root directory folder and save as “Index”.
7) Ones the frameset has been saved, the appearance effect of the HTML frames can be modified from the page properties dialogue box. Go to modified menu > page properties > appearance HTML, to alter the background effect, text colours etc. (Figure 5).
![]()
Figure 5. Modified frame background effects, saved as HTML files.
8) The frame width can be modified preferably by using the resize cursor or by editing the rows and cols values in the code view of the index frameset or by editing in the properties inspector. To activate the index frameset, click on any of the frame borders. Note that clicking inside the frame will activate the particular HTML frame.
9) A very important step is the Assigning of Unique “ID” Names, which will serve as the target names for linking HTML files to open in.
a) In the index frameset code view, click on each “frame Src”.
b) Change the respective “Frame name” in the properties inspector to assign unique “id” name to each frame. You can assign the same HTML file names as the “id” unique names.
c) In this study, the topFrame was named as “banner”, leftFrame “navigation”, the mainFrame as “content” and the rightFrame as “instructor”. Note that these “id” names are not HTML files.
10) Configuring the scroll, resize and border effect of each frame:
Activate the index frameset and click on each “frame Src” in the code view to edit their properties in the properties Inspector as follows:
a) frame src = “frames/banner.html” (Scroll = No, No resize = check, borders = No).
b) frame src = “frames/navigation.html” (Scroll = Auto, No resize = check, borders = Default).
c) frame src = “frames/content.html” (Scroll = Auto, No resize = check, borders = Yes).
d) frame src = “frames/instructor.html” (Scroll = Auto, No resize = check, borders = Default).
Note that:
a) Assigning “Yes” to the borders will render them visible in the browser window.
b) Auto scroll implies that the system will determine when to show the scroll bar.
c) No resize restricts users from resizing the frames in the browser window.
When a hypertext is linked to open an html file in the content frame, the hypertext reference (href) must include the target frame which is scripted as target = “content”.
11) It is advisable that designing of the artistic effects of a website is carried out by editing the individual respective HTML files saved in the frame directory folder. For example, to add banner heading (Figure 6), open the banner frame file separately in Dreamweaver and edit with the “page properties” dialogue box. The use of tables to organise graphic elements of text and diagrams is of valuable importance.
12) After every design process, it is advisable to preview the visual effect by opening the index frameset file in the web browser (Figure 7).
The scrollable “Navigation Frame” is an important panel in the designing of an electronic learning website interface. It is advisable to embed with a tab bar to display a Search Engine window, Table of Content window, Alphabetic Index window and a Help window. Each window should be saved as an HTML file, bearing a unique name and targeted to open in the navigation frame. The search engine window can be save as “search”, the table of content as “tcont”, the alphabetic index window as “alfindex” and the help window as “help”.
![]()
Figure 6. Editing individual frame artistic effects.
![]()
Figure 7. Preview of visual effects in browser.
5.4. The Search Engine Window (Figure 8)
The search engine window displays a search engine, which enable users to search from its database, topics on the course of study as they type in the search text box, any keyword associated with the topic. For the “DFWM” website, the search engine was programmed with a JavaScript language, based on Adobe JS CDATA System, which required that the JavaScript file is stored in the same folder as the search engine html file and database files. The search engine offers a user-friendly functionality, such that, when any Keyword(s) relating to topics in “Fisheries and Watershed Management Course” including the Course Code is/are typed in the search text box, the system filters from the database, only reports that capture the keyword(s). The system then populates the filtered topics below the search text box. It has been developed to display HTML file formats that contain the lecture notes and are targeted to open in the content frame as the user clicks the “topic” in the search results. The link to stream the audio-visual materials supporting lecture notes is embedded in the notes as hyperlink.
The search engine characteristically has the following unique functions:
1) If the learner types more than one word separated by spaces, the search engine will populate topics that contain the words typed. For example, if one types
“fish net,” the search engine will only populate all topics containing both “fish” and “net”.
2) The Search engine does not do word-stemming. For example, if you search for “fish” the search will not match “fishing” or “fishers”.
3) Matches are not case-sensitive; so “Water” is the same as “water”.
4) Topics that include matches in their titles are ranked higher in the search results. The number of matches in a topic also affects its rank.
5) The Search engine ignores all punctuation characters except periods within words and underscores.
6) The Search engine filters and ignores very common words, often called “stop words”, you type in the Search text box. These common words usually don’t improve the search results. Examples of stop words include “the,” “of,” “as,” and “when.” For example, if one types “weighing of fishes” in the text box, the search excludes the word “of” and displays pages that contain only “weighing,” and “fishes”.
7) The Search engine ignores one and two-character words (unless the 2-character word includes a digit).
It is relevant to include a “help” window to display a page that provides guidelines for using the search textbox in case a student encounters difficulties.
5.5. Table of Contents Window (Figure 9)
The Table of Contents window is designed to lists out all the topics, categorised
under Units and Sections. When the table of contents tab is clicked, a list of units on subject areas first display and each expands into various sections when clicked. The sections also expand into respective topics when clicked. The topics are linked to HTML file formats that display lecture notes and are targeted to open in the content frame when topics are clicked.
5.6. Alphabetic Index Window (Figure 10)
The inclusion of an Alphabetic Index Window is to offer student quick access to topics based on their alphabetic initial. It should be designed to display topics by alphabetic arrangement. Clicking the index tab should display the alphabets in the navigation frame. Each alphabet, when clicked should display serialized list of topical words by their alphabetic initials in the navigation frame. Each list should have an attached hyperlink key which when clicked should display the accompanying lecture notes in HTML file format in the content frame.
5.7. The Content Frame
The content frame is the target window for displaying all lecture notes on topics listed in the navigation frame. It is therefore important that the “href” tag script of a hyperlinked topic spells out the page link to the note and conclude with the target id name.
Each lecture note must be formatted into html file using Adobe Dreamweaver CS6 to enable the embedding of hypertext links to stream accompanying audio-visuals on practical activities to enhance student-learning experience. This is a very significant aspect of the author’s scheme that is meant to foster effective electronic learning in studio and laboratory-based programmes.
5.8. Streaming of Audio-Visual Materials
Figure 11 and Figure 13(b) are illustrations of live streaming video and audio narrative respectively.
![]()
Figure 11. Window displaying video on net seining.
Figure 11 is one of the field activities in fish farm management, captured on video as a field practical activity in the Department of Fisheries and Watershed Management in the Faculty of Renewable Natural Resources at KNUST. This is one of the audio-visuals that have been incorporated in their online learning system. It was rendered in MP4 Smart player ‘HTML5 format using Camtasia Studio version 18. The software also has the tools for extracting sound from a video and renders it into mp3 audio file format. A video rendered in MP4 Smart player ‘HTML5 enables students to stream it live on any computer internet browser as well as smart phones.
To make this video easily accessible to learners, lecture notes which will open in the content frame have to be formatted as HTML files in order to embed hyperlink text that will stream the accompanying video or audio material in a new window separated from the parent window. This strategy enables the video to stream live alongside the displayed lecture notes in the content frame so the learner can related with the two resource materials. This function is very significant in bringing field practical activities, studio demonstration procedures as well as laboratory experiments to the learner in the comfort of his residence, work place or institution. This can help reduce the rate of face-to-face engagements in the physical environments.
Unlike Microsoft word in which web page designing does not require the designer to edit in html codes (Annum, 2013) , ability to use Dreamweaver is subject to in-depth knowledge in graphic design principles, HTML scripting and Java scripting that produces advanced professional results.
Dreamweaver software shows both design and code views to enable the designer to edit in both windows. When preparing lecture notes in Dreamweaver, a “click here” hypertext command has to be embedded to load the video to stream when clicked. This is made possible as follows:
1) In the design view window, embed a “click here” text in the lecture notes. Then select the text to open the properties inspector.
2) Type the “harsh” (#) symbol in the link box. This will be scripted as a hypertext Reference in the code view.
3) In the code view, select the html tag and replace with the html tag script below (Figure 12).
4) Edit the page link (../media/video/seining/seining.html) based on your directory folders.
The “click here” will convert to a hypertext link in the web browser and when it is clicked, it will trigger the opening of the MP4 Smart player HTML5 “seining video” in a separate window, in the web browser. The above script (Figure 12) is the relative path to the MP4 Smart player HTML5 video file.
In the HTML tag script in Figure 12:
1) The two dots and the front slash (../) preceding the path indicate that “media” folder is located one level up from the folder which contains the seining lecture notes file (Refsnes Data, 2022) .
2) The media folder stores the video folder.
3) The video folder stores the seining folder.
4) The seining folder stores the MP4 Smart player HTML5 seining video file.
The script also assigns the following characteristics to the window that will display the video material.
1) There will be no menu bar on display,
2) The window cannot be resized,
3) No scrollbars will be displayed,
4) The width of the window will measure 750 pixels,
5) The height of the window will measure 500 pixels,
6) The “return true” script indicates that the execution should continue. If it is scripted as “return false”, it will imply that the click event will never get executed.
Repeating the above procedure with an mp3 sound file as scripted in Figure 13(a) will stream live a voice recording in MP3 format to play alongside the lecture notes as shown in Figure 13(b).
Figure 12. HTML tag script to open and stream live video. Further reading: https://stackoverflow.com/.
(a)
(b)
Figure 13. (a) HTML script to playback audio recording; (b) Window playing back audio on alkalinity in water quality assessments.
In this case, the mp3 file (watquasnd) is stored in the watqua_aka folder, which is also stored in the audio folder and finally stored in the media folder.
Against the publication of Arkorful & Abaidoo (2014) emphasising the impossibility for purely scientific fields that incorporate practical activities in their pedagogy, to study such practical courses through e-learning, the author’s technological work nullifies this sceptical opinion with a proof of the possibility for such institutions to foster electronic learning implementation. Visit: https://webapps.knust.edu.gh/lmat/FRNR_Lmat/FRNR_index.html for evidence of how this system delivers electronic learning resources of lecture notes incorporated with audio-visuals of practical activities in a web browser.
6. Conclusion
Although there are more advanced technologies like video-conferencing that can facilitate distance-learning activities in practically oriented tertiary institutions, it has the limitation of streaming videos on smart phones, which are now major basic tools for enhancing students learning activities. Distance learning students will always have to converge at a learning centre to access the video conferencing facility. This is a challenge that will not serve the interest of learners. The need for developing the technological acumen for designing simple but effective web enabled delivery technologies that incorporate, Graphics, Sound, Video and Text documents for enhancing electronic learning should be embraced as a major panacea for addressing the critical issue of institutional overcrowding.
KNUST now has the State of the Arts Facilities to enable capturing of quality videos and sound recordings with distinct clarity that will address concerns about video blurriness. The author has also demonstrated the web designing and developing abilities for supporting capacity building in the transfer of skills to prospective course instructors in Ghanaian institutions.
This technology will definitely help academic departments that dwell much on industrial attachment for problem-based learning, to bring most of their field practical activities into the virtual classroom teaching space. Faculties like the Medical School, Pharmacy, Fine & Industrial Arts, Engineering and Agriculture should embrace this scheme of electronic learning to help them offer opportunity to many applicants to pursue their programmes from the comfort of their homes and work places.
It is however worth noting that, the success of running this system of e-learning immensely depends on high-speed broadband wireless facilities for uninterrupted live streaming of audio-visual resource materials. The current state of slow internet speeds in small towns and rural communities and even on university campuses is a challenge that has to be surmounted for this system to be effective.
Conflicts of Interest
The author declares no conflicts of interest regarding the publication of this paper.
References
- 1. Adobe (2021). Use Frames. https://helpx.adobe.com/in/dreamweaver/using/using-frames.html [Paper reference 1]
- 2. Anderson, T., & Shattuck, J. (2012). Design-Based Research: A Decade of Progress in Education Research? Educational Researcher, 41, 16-25. https://doi.org/10.3102/0013189X11428813 [Paper reference 1]
- 3. Annum, G. Y. (2013). Useful Lessons for Distance Educational Course Writers Lacking Capacity for Interactive Electronic Learning Material Development for the Enhancement of Web-Based Distance Learning. Global Advanced Research Journal of Educational Research and Review, 2, 211-217. http://garj.org/garjerr/11/2013/2/11 [Paper reference 1]
- 4. Arkorful, V., & Abaidoo, N. (2014). The Role of e-Learning, the Advantages and Disadvantages of Its Adoption in Higher Education. International Journal of Education and Research, 2, 397-410. http://www.ijern.com/journal/2014/December-2014/34.pdf [Paper reference 2]
- 5. Basantia, T. K. (2018). Implementing Practical Based Courses under Open and Distance Learning System: A Study of the Perception of Learners and Counsellors. Turkish Online Journal of Distance Education, 19, 201-214. https://www.researchgate.net/publication/324412396_Implementing_Practical_Based_Courses_Under_Open_and_Distance_Learning_System_A_Study_of_The_Perception_of_Learners_and_Counsellors https://doi.org/10.17718/tojde.415838 [Paper reference 1]
- 6. Chitra, A. P., & Raj, M. A. (2018). E-Learning. Journal of Applied and Advanced Research, 3, S11-S13. https://www.researchgate.net/publication/325086405_E-Learning [Paper reference 1]
- 7. Dcu Library (2022). HSS Research Methodologies: Practice-Based & Practice Led Research. https://dcu.libguides.com/c.php?g=654993&p=4603426 [Paper reference 1]
- 8. Domantas, G. (2022a). What Is HTML? Hypertext Markup Language Basics Explained. https://www.hostinger.com/tutorials/what-is-html [Paper reference 1]
- 9. Domantas, G. (2022b). What Is JavaScript? A Basic Introduction to JS for Beginners. https://www.hostinger.com/tutorials/what-is-javascript [Paper reference 1]
- 10. Gul, S. B. A. (2015). E-Learning Revolutionise Education: An Exploratory Study. http://www.researchgate.net/publication/280862765 [Paper reference 1]
- 11. Kennedy-Clark, S. (2013). Research by Design: Design-Based Research and the Higher Degree Research Student. Journal of Learning Design, 6, 26-32. https://doi.org/10.5204/jld.v6i2.128 [Paper reference 1]
- 12. Kennesaw State University UITS (2017). Introduction to Camtasia. https://apps.kennesaw.edu/files/pr_app_uni_cdoc/doc/Introduction_to_Camtasia_Studio_9.pdf [Paper reference 1]
- 13. O’Leary, T. J., & O’Leary, L. I. (2000). The O’Leary Series Microsoft Word 2000 (Introductory ed.). McGraw-Hill Companies, Inc. [Paper reference 1]
- 14. Refsnes Data (2022). HTML File Paths. w3schools. https://www.w3schools.com/html/html_filepaths.asp [Paper reference 1]
- 15. Scott, E. E., Wenderoth, M. P., & Doherty, J. H. (2020). Design-Based Research: A Methodology to Extend and Enrich Biology Education Research. CBE—Life Sciences Education, 19, 1-12. https://doi.org/10.1187/cbe.19-11-0245 [Paper reference 1]
- 16. Sergei, D. (2021). Web Designer vs Web Developer: What’s the Difference? https://elementor.com/blog/web-designer-vs-web-developer [Paper reference 1]
- 17. Williams, B. K., & Sawyer, S. C. (2005). Using Information Technology, a Practical Introduction to Computers & Communications (6th ed.). McGraw-Hill Companies, Inc. [Paper reference 1]