Building Interactive Content

Building Interactive QLD193 Content Topics A detailed research document with step by step instructions in building I ntroduction and Purpose compatible interactive content. Learn what we set to achieve and why it was such an important goal to our Funding Acknowledgment organization. Research and Constraints This project was made training sector to take advantage of the Discover the methods and obstacles possible through funding from the roll out of the National Broadband involved in our project. National Vocational Education and Network (NBN) to make major advances Training (VET) E-learning Strategy (the in the achievement of government Creating an Interactive PDF training objectives. Coordinated action to Strategy). The Strategy is a joint initiative develop sector-wide capability in using A step-by-step guide to creating of the Australian and state and territory interactive PDF’s. the new technological environment will at governments, designed as a three year the same time, stimulate innovative Creating and Interactive Website program of action with a series of approaches to increasing participation in A step-by-step guide to creating ongoing business activities reflecting its training and work and improving the skills interactive websites. strategic objectives. The Strategy will levels of the Australian workforce play a key role in enabling the Australian (http://flexiblelearning.net.au). Australian Government Department of Industry, Innovations, Science, Research and Tertiary Education Building Interactive Content, © Commonwealth of Australia Learning Network Queensland 2013

Edition May 2013 Building Interactive Content Acknowledgement: Building Interactive Content Commonwealth of Australia Learning Network Queensland 2013 With the exception of the Commonwealth Coat of Arms, the Department’s logo, any material protected by a trade mark and where otherwise noted, all materials presented in this document are provided under a Creative Commons Attribute 3.0 Australia (http://creativecommons.org/licenses/by/3.0/au) licence. The principal author of this document is Carly Bryan, acting web development officer, student support officer and teacher support officer.

Table of Contents Building Interactive Content ............................................................................................................. 1 Introduction and Concept .............................................................................................................. 1 Establishing a purpose ................................................................................................................... 2 The Research Paradigm and Context .............................................................................................. 2 HTML/HTML5 ............................................................................................................................ 3 CSS/CSS3 ................................................................................................................................... 3 JavaScript .................................................................................................................................. 3 WordPress ................................................................................................................................. 3 WordPress Plug-ins .................................................................................................................... 4 WordPress Codex ...................................................................................................................... 4 Adobe Master Collection CS6 ..................................................................................................... 4 Adobe Acrobat X Pro ................................................................................................................. 4 FileZilla ...................................................................................................................................... 4 Lynda.com ................................................................................................................................. 4 Research Focus .............................................................................................................................. 5 Constraints, Special Considerations and Boundaries ...................................................................... 6 Server Access ............................................................................................................................. 6 Education Network Email Restrictions........................................................................................ 6 Web and Program Access .......................................................................................................... 7 Flash .......................................................................................................................................... 7 Normal Business Operations ...................................................................................................... 8 Work Around ................................................................................................................................. 8 Research Contributions.................................................................................................................. 9

Creating an Interactive PDF ............................................................................................................ 10 Programs Used ............................................................................................................................ 10 Creating an Interactive PDF...................................................................................................... 10 Creating an Interactive Web Page ............................................................................................ 10 How to begin ............................................................................................................................... 11 Story Board.................................................................................................................................. 12 Creating our Template ................................................................................................................. 14 Adding Content............................................................................................................................ 15 Fixed Wording ......................................................................................................................... 15 Text Boxes and Radio Buttons .................................................................................................. 17 Image Effects ............................................................................................................................... 19 Creating Small SWF Components ............................................................................................. 20 PDF Alternates .................................................................................................................... 21 Interactive PDF Background ......................................................................................................... 22 Creating the SWF Export File ........................................................................................................ 23 Final Steps of Interactive PDF ....................................................................................................... 25 Buttons .................................................................................................................................... 25 Hyperlinks- PDF’s and Web Pages ............................................................................................ 26 Submit Button ......................................................................................................................... 27

Creating an Interactive Website ..................................................................................................... 28 How to begin ............................................................................................................................... 28 Categories ................................................................................................................................... 29 Posts............................................................................................................................................ 29 Plugins ......................................................................................................................................... 30 Accordions ................................................................................................................................... 31 Quiz Plugin .................................................................................................................................. 33 Creating Sections ..................................................................................................................... 34 Creating Forms ........................................................................................................................ 34 Creating Questions .................................................................................................................. 35 Placing Quiz ................................................................................................................................. 37 Survey Data .................................................................................................................................... 39

Building Interactive Content Introduction and Concept The following information was developed as part of the E-Learning for Participation & Skills project under the National VET E-Learning Strategy in preparation for the National Broadband Network. The focus of E-Learning for Participation & Skills is to “provide opportunities for learners, including disadvantaged learners, to gain access to pre-vocational training, training for critical skills needs… and/or pathways to higher education.”- http://participationandskills.wikispaces.com/. Unilearn is more directly affiliated with providing a pathway to higher education in University study as we offer foundation knowledge courses in mathematics, sciences, economics and literature. All courses (excluding Get Prepared to Study Online and Successful Study Skills) are mapped to National Standards for year 11 and 12, and are offered through an online classroom with carbon and electronic supplemental learning materials. In order to meet the requirements of the E-Learning for Participation & Skills project we focused on the usability of interactive PDF’s. Unfortunately it was concluded that due to our inaccessibility of the organisations server we were unable to develop the interactive PDF’s to their full potential. As a result, we decided to move into a path that required extensive research. I have included what research has been helpful in the creation of Interactive PDF’s in the hopes that if you have access to your organisations server you might take the easier (but not necessarily better) route of creating an Interactive PDF which feeds submitted information through the server as an FDF. The second path demonstrated will show you how to create a practical component through a hosted WordPress site. This path entails essential research into HTML, HTML5, CSS, CSS3 and JavaScript coding, however once you have wrapped you mind around the basics it is relatively easy to construct. Learning Network Queensland | Brisbane North Institute of TAFE 1

Establishing a Purpose In 2012 the Australian Government announced the roll-out of a National Broadband Network which will provide faster internet speeds to homes and business. As a result we can expect a larger community growth in the online environment. Universities and educational bodies will need to ‘jump on board’ to keep their competitive edge and stay afloat. Through our own surveys* we have collected data confirming that students prefer to have some sort of supplemental online experience whether it is a classroom, lecture or instructional video. To keep our own competitive edge in the learning environment we are creating an abundance of online resources for students to access and interact with to give them a richer experience in the course, and greater understanding of its contents. *Survey data can be found at the end of this document. The Research Paradigm and Context Our project, “Increasing Student Success using Interactive Content” will provide students taking science based classes with authentic hands-on experiences using virtual interactive lab technology enabling rural and remote students the ability to participate in practical applications of scientific concepts. This in hand will allow these courses to be accepted as meeting pre-requisite requirements for University entry, giving students a larger range of courses to study at their own pace through Unilearn enabling them to pursue a higher education. These are not stand-alone materials; they will be accessible through our online classroom created through CourseSites.com as part of the students required learning in order to complete their course. CoursesSites.com is a free LMS (Learning Management System) offered by Blackboard for teachers to create online classroom environments with rich interactive materials and access to an extensive resource databank. Though the product is accessible through CourseSites.com it is hosted through our Unilearn.net.au website. By hosting this product on our own website we achieve full control over the development and delivery of our product. At the beginning of this project we researched interactive PDF’s as our delivery method. More about the success and restraints of this option will be explained later in this document. For the most part research into this area was minimal; the topic of interest FDF and can we use it. Through internal questioning it was discovered that this was not an option that we could pursue. We then turned our research towards hosting the lab as a website on our current Word Press website. As a result it was necessary to gain an understanding of the following: Learning Network Queensland | Brisbane North Institute of TAFE 2

HTML/HTML5 Hyper Text Mark-up Language (HTML) is the language used by all web pages to describe itself to the web browser it is being viewed on. As stated in the name, HTML is a mark-up language which uses tags to describe content. For more information about HTML tags please visit http://w3school/html/html_intro.asp HTML was first proposed and prototyped in the early 1980’s in order to interpret and compose text, images and other materials either visually or audibly onto web pages. It was originally a very simple and minimal design that would not support todays advanced web pages and information. Hence the continual evolution of hyper test mark-up languages. HTML5 is the newest evolution that further promotes the cooperation of both Web Hypertext Application Technology Working Group (WHATWG) and World Wide Web Consortium (W3C) creating a more compatible and fluent web experience. CSS/CSS3 Cascading Style Sheets (CSS) contain rules of how to display HTML information from the size, color and weight of your headings to the position, color, width and height of your tables. This may not seem very significant to a beginner in coding but ask any veteran and they will say the CSS makes their life easier. As HTML is forever growing you’ll see CSS matching its pace. CSS3 is the newest release to accompany HTML5; it has been split into modules for the more common of style sheet commands such as text effect, background and boarders, user interfaces and animations to assist in stream lining and organising your website and commands. JavaScript JavaScript is a coding language that can be incorporated into your HTML to increase your websites web browser compatibility. It can be quit specific in terms of individual commands to promote the same action on all web browsers your site may be viewed by. In terms of our research JavaScript has been the largest time consumer; however its form capabilities are well worth it and will be explained to you in the instruction for creating website for your lab. WordPress “WordPress started as just a blogging system, but has evolved to be used as full content management system and so much more through the thousands of plugins, widgets, and themes; WordPress is limited only by your imagination.” – WordPress.org/about Learning Network Queensland | Brisbane North Institute of TAFE 3

WordPress Plug-ins Plug-ins are easy to install and can do just about anything you put your mind to, simply search and find the plug-in that best suits your needs and install. It’s that easy! WordPress Codex As with any website there is a back end comprised of PHP and CSS files which make up the design and functionality of your website. It was essential to study this codex as ‘tweaking’ it here and there was necessary in order to produce our final product. Adobe Master Collection CS6 All the tools needed to create interactive, multimedia and digital products. For more information on individual products please visit Adobe at http://www.adobe.com Adobe Acrobat X Pro Through http://helpx.adobe.com/support.html and http://www.adobe.com/au/support/ I was able to fully research the limits and functionality of Adobe Form Options and Capabilities. FileZilla “FileZilla Client is a fast and reliable cross-platform FTP, FTPS and SFTP client with lots of useful features and an intuitive graphical user interface.”- https://filezilla- project.org/client_features.php This program is a key component in delivering documents and PDF’s to students as it allows us to send hyperlinks to the files rather than sending the entire file. Lynda.com “lynda.com is an online learning company that helps anyone learn software, design, and business skills to achieve their personal and professional goals... .New courses and topics are added every week… .We carefully select the world’s top experts who are the best in their field, passionate about their subject matter, and know how to teach.” – www.lynda.com/aboutus/ Learning Network Queensland | Brisbane North Institute of TAFE 4

Research Focus Goals:  Interactive and visually attractive.  Easily submitted back to the teacher in a format less than 10 MB in size and recordable for student records.  Incorporating pre-existing FLASH components in a more accessible manor. E-Learning for Participation and Skills Project Goals:  Accessibility  Web accessibility means that people with disabilities can use the Web. More specifically, web accessibility means that people regardless of disability can perceive, understand, navigate, and interact with the Web. Using web accessibility principles benefits all users because it requires web content and software is flexible enough to meet different user needs, preferences and situations. The Australian Government has endorsed the Web Content Accessibility Guidelines (WCAG) version 2.0 for all government websites: Australian Government - Web Guide - Accessibility (Opens in new window). This requirement supersedes the previous mandate for compliance with WCAG 1.0.  Digital Video  There is increasing demand for video content in VET e-learning delivery, driven by various factors including improved capabilities of mobile devices, and the desire to make e-learning content more engaging for learners. The National Broadband Network is also expected to drive the use of video content for VET e-learning. Research on this topic was initiated in 2011 with the aim of providing e-learning content developers and teachers more guidance about creating and delivering content for learners to ensure it can be utilised by the widest number of learners across various platforms and devices. Learning Network Queensland | Brisbane North Institute of TAFE 5

Constraints, Special Considerations and Boundaries I had many initial difficulties in approaching the completion of this project. As it is with any new venture, there were certain obstacles and considerations that had not been thoroughly considered at the beginning of the project. This is not to say that anything was done incorrectly but to point out that no matter how much planning you put into your project you are bound to run into something you didn’t think of. Server Access Our lack of server access greatly limited the use of interactive PDF’s. In order to use the form capabilities to their full potential it is essential to have server access for the purpose of sending and receiving FDF information from the student taking the lab to the teacher needing to grade it. Why FDF, why not just send the whole file back and forth? Because the Lab files range anywhere from 8-14MB which is to be expected due to the amount of information and interactivity they contain. Because of this large file size a FDF communication between server and lab information is critical. What does an FDF programme on the server do? When the student clicks submit all of their answers and information entered into their lab is submitted in FDF format to the server. On the server, the FDF data is modified and archived, the shell PDF would then be sent to the teacher to grade. When the teacher goes to open the PDF it will auto populate with the archived FDF information for the teacher to grade, they could then save the file with comments to the student and send it back following the same FDF process. Everything with the FDF happens in the background, so all the student and teacher would see is a PDF with their entered information. Sweet, simple and easy isn’t it (if you have access to your server). Education Network Email Restrictions Our organisations email file attachments are limited to sending and receiving no greater than 5MB. As students are required to submit a substantial amount of information the file size limitations have become a constraint that could not be ignored or easily worked around without over complicating the experience for the student. Keep this in mind for your own development, fewer steps involved in sending the information means a better experience for the student. Learning Network Queensland | Brisbane North Institute of TAFE 6

Web and Program access At the beginning stages of this project it was believed to be as simple as create, export and deliver. It couldn’t have been further from the truth. Initially I had created the entire lab in CS6 InDesign thinking it would export perfectly and I would be able to upload it to my FTP and link to the file through our online classrooms. Upon exporting to an interactive PDF I found that a lot of my interactivity was lost! After breathing into a paper bag for several hours to gain my nerves I discovered that the flash components were not exporting properly into adobe. This was not a problem; flash can easily be imported into a PDF using Adobe Acrobat X. The only arduous part was creating that my layers of the previously completed InDesign project. I have given instructions of how this was done later in the paper. After layering the lab through Adobe Acrobat X I found that all components worked as they should and moved to deploying the lab in our online classroom for proper testing. By displaying and accessing the product through our online classrooms we found that web browser compatibility for reading interactive PDF’s varies drastically. This resulted in students using adobe reader thus loosing accessibility through smart devices. Students using Macs sometimes used a product called PDF Reviewer, this is a free program installed onto their systems when they are manufactured. It came to our attention that students using PDF Reviewer had a good experience on their end. However once the file was submitted, the teacher found it increasingly difficult to grade as the Mac PDF Reviewer is not fully compatible with Adobe Reader. Teachers would have to click or double click on the submitted text fields in order to view the previously hidden information, which can understandably become quit tedious for the teacher when grading a multitude of labs. This is not an entirely solvable situation with interactive PDF’s, the furthest we could go was to zip the interactive PDF so that a ‘Save as’ file prompt would appear when the student clicked on the labs hyperlink. By having the student download the lab we hoped to at least rid ourselves and the students of the highly inconsistent compatibility of interactive PDF’s read through different web browsers. The only real set back to zipping the file is that we have now lost our compatibility with smaller media devices such as android phones, tablets and iPhones, iPods etc... Flash Our labs are constructed around pre-existing flash components. We are currently researching methods of converting these Flash components into more compatible. A suggestion was made to package the lab into a phone app, this would allow the flash components to run on mac devices. Upon trying this we found that the pre-existing FLASH would simply flatten and loos all interactivity. In order to package the flash we would need the original coding for the flash component which we are working on obtaining. For the moment though all we have is a hyperlink to the free resource. Why don’t you just find another flash component with the base coding to use? Learning Network Queensland | Brisbane North Institute of TAFE 7

Believe or not we have tried, and have succeeded for 95% of the labs. We are unable to find a suitable replacement for our microscope lab, a key practical component and learning subject for aspiring science students. Normal business operations At the beginning of this project normal office commitments and responsibilities took priority due to peak exam periods causing a shift in office responsibilities to make up for development time lost. I acknowledge that these products can be created in a number of different ways from how I have presented this information. My hope is to identify for you the information and considerations necessary to help you chose the path that is best suited for you regardless of the constraints and boundaries set upon me. In my research I found that any one approach did not provide the most desirable of outcomes. I worked to provide a final product that merged these different processes to achieve the ideal product. Work Around At the beginning of this project it was our focus to find a way to deliver our product to students who did not have FLASH capabilities; some easy ways to do this are as follows:  Alternative PDF link which contains the same information with less bells and whistles – Instructions of how to do this will be provided  Cutting all FLASH based interactivity from your project  Converting FLASH into another format – Currently being researched. Research was conducted in finding a way to force a hyperlink to download a file rather than opening it directly in the web browser. The most apparent way found to do this was to package the information in a .zip file which causes any web browser to prompt a ‘Save as’ function. This unfortunately means that the information s no longer accessible to smart devices. Development of the Interactive PDF was continued purely to provide the product to the students for feedback though construction of the web site option was now in motion. Deployment of the Lab brought to our attention that students were submitting very large file sizes which brought about the decision of creative a separate answer sheet which was submitted apart for the lab. Students accessing the Lab through home, work or school computers prefer the Interactive Lab to the previous paper version as there are better examples, walkthroughs and tutorials embedded into the materials. After concluding the construction of a marginally successful interactive PDF due to unforseen constraints and restrictions it was prudent to discover another means of creating, hosting or delivering the same information (thus the creation of a website with form capabilities). With extensive research and testing it was decided that JavaScript may be the best tool in capturing Learning Network Queensland | Brisbane North Institute of TAFE 8

information to later populate into a page for submission at the end of the students lab. This then negates the use of a server and enables our website to host the information on WordPress.com. Research Contributions This document will provide a step by step instruction guide for the creation of two different formats of learning materials as well as any research and considerations you may need to take before beginning. The first format will be interactive PDF’s and an explanation of the submission process through and FDF server. The second format will be the construction of a web site with form capabilities including the research and resources available to you. Learning Network Queensland | Brisbane North Institute of TAFE 9

CREATING AN INTERACTIVE PDF Programs Used In this tutorial I will be using the following programs and information web sites: Creating and interactive PDF  CS6 InDesign Starting guide  CS6 Photoshop  CS6 Fireworks  Adobe Acrobat X Pro  Javascript Creating an interactive website  CS6 Photoshop  CS6 Fireworks  Javascript  HTML  HTML5  CSS  CSS3  FileZilla  http://www.w3schools.com/  WordPress  WordPress Plugins  Codex.wordpress.org  Lynda.com Learning Network Queensland | Brisbane North Institute of TAFE 10

How to Begin Here is an excerpt from ‘Putting a Science Course Online’ by Jenelle Benson that will help you in choosing a subject for your interactive lab as well as explain the importance of having an interactive lab. “…interactive labs and activities. This is the part that can be tricky. The need to provide science student’s with the ability to perform hands-on labs is essential and needs to be included in any online class to reinforce theoretical concepts introduced in a science classroom. There are many excellent free simulations along with other tools that can be licensed for use in an online classroom. I like to stick with the free simulations as anyone can use these. Various Universities, many of which reside in the United States, have created most of the free simulations or interactive components. This is handy, because in the United States they make all of this material available for students and teachers to use in order to enhance classroom learning. As long as you use these simulations for educational purposes and not to package and resale you are free to use them to your heart’s content. In some instances middle school and high school teachers may have already designed a lab around the simulation and many times this information is available. If the simulation does not come with any lab design then you will need to thoroughly investigate how the simulation works and create a tutorial for students along with a lesson plan for how the simulation will be used. This is a typical lesson plan that you would use in any face-to-face lab. In this instance, instead of face-to-face, the students will complete the simulation for the practical component of the lab in the online classroom. You will have to decide what parts the students can write into an electronic document and what parts they may need to draw by hand and then scan or take a picture of to support the hands-on activity. For instance, I require students to draw pictures of the slides they observe under the virtual microscope they use. Students need to scan or take a picture of these drawings and attach them to the lab form in the online classroom. You will need to discuss these last few options with whoever is designing or building your online classroom. Having someone who is handy with online classroom design is a necessary component for creating and maintaining your online classroom. ” Learning Network Queensland | Brisbane North Institute of TAFE 11

Story Boarding After reading the excerpt from ‘Putting a Science Course Online’ you should begin the arduous task of picking a topic or concept for your lab. For the purpose of this tutorial I will use our “Microscope Lab”. A pre-existing flash lab has been chosen which is offered as a free resource by University of Delaware and a lesson plan has been drawn to cover the following:  Purpose of the Lab  Objectives  Materials needed  Light microscope images  The different parts of the microscope  Define  Pre-Lab Questions  Total magnification  Have them read and identify the different ocular and objective magnifications  Name the parts of the microscope  Procedure questions  Draw the slide questions  Have students demonstrate their knowledge of working the microscope by having them draw certain views from the microscope  Give video example of how this is done  Conclusion Questions Now that we know what we want in the lab and in what order, let’s put it together in a more visual presentation, a story board! Learning Network Queensland | Brisbane North Institute of TAFE 12

Story boards are subject to ‘shift’ while you are developing the materials in CS6 or through Word Press, this is normal. Below you will see that I have begun to populate my story board with information from the outline. Any animations mentioned in the story board will later be researched and developed accordingly. It is not always possible to easily animate an area depending on the animation you had in mind so be flexible. Don’t forget to site your information! Whether they are quotes, content or your flash components, be sure to site them because “sharing is caring” and those people deserve credit for their contribution to your work. Now that we have our story board we can begin development, the fun and frustrating part. Learning Network Queensland | Brisbane North Institute of TAFE 13

Creating our Template My first project was creating the background for all of the pages. As this is instructional material I wanted it to have the look and feel of a University work book, so I added shading and a few lines here and there to give it a basic text book look. I then identified key trademark colors to use for the color scheme and used this to help identify the difference between main content and additional/indexed content. For example, on the outer sides of the electronic workbook I created a dark blue column for the use of displaying references, materials needed, side note support and brief instructions of how to use the interactivity on each page. By doing this I hope to inc4rease the success of users’ interactivity with this material and reduce any difficulties or confusion in which I foresaw. To do this I followed these steps: 1. Open Adobe In Design CS6 2. Create a New Document 3. Under Intent: select what best describes your activity. I have used Digital Publishing to get the most out of the Interactive PDF 4. I then gave myself a few pages to work with (ex: 10 pages) 5. I changed the page size to a standard A4 is going to end up as a PDF which is compatible with smart pads and screen/adobe readers. 6. If you would like to create that ‘open book’ look for your activity than make sure the orientation is set to Landscape with a width of 841.89px and a height of 595.276px (2x the width of a normal A4). 7. I decreased the number of Columns to three 8. Now uncheck the link icon in the Margins area and set the L&R to 12p each a. this will give you some space above and below text to add logos, page numbers and titles 9. And click OK Now you have a blank canvas for your work, but you probably aren’t too keen on the plain white look and want something a bit more engaging for the eye. Instead of having to create a background for each page I created a template by going to the Pages window and clicking on the A-Master. Anything you add to the A-Master will appear on all of your other pages. This process can take a while and you are able to make changes and adjustments to the A-Master at any time through the development of this material (which I found myself doing often as you can never quite tell how things will fit until you have them on the page). Learning Network Queensland | Brisbane North Institute of TAFE 14

Adding Content Fixed wording As you create text boxes keep in mind your ordering for the page. Tag your items in order so you can clearly identify them later in the event that you need to add information. The tagging will help organise the information for a screen reader to follow. In these images you can see an underlined title to the left with the corresponding section highlighted in white to the right. Learning Network Queensland | Brisbane North Institute of TAFE 15

These are our tags which are used by Adobe and Screen Readers as reading instructions. Therefore, whatever order your tabs are in is the order the document will be read in by Read Out Loud programs and equipment. Tagging: http://help.adobe.com To access in CS6 InDesign go to Window > Utilities > Tags. I created tags by page and headings, for example all headings to pages go into the heading tag group and then under each heading would be another group named after the pages main theme. But really, organise it however best suits your needs. This will help later on if you find you have forgotten some information and need to reorder your Tags so the new information is read in the correct order by a screen reader. Otherwise all new Tags will just be read at the very end. Learning Network Queensland | Brisbane North Institute of TAFE 16

Text boxes and radio buttons If you have server access than you are free to add your text fields and radio buttons to this current layout we are creating. If you find that you are working with the same restrictions as I was then you will need to create a separate document as an answer sheet and simply refer to the answer sheet when a student needs to type their answer on it. Either way here is how you would create the form areas. Text boxes To insert a text field for students to type their answers you will first click the text button and then click, hold and drag out a box the seems to be the appropriate size for their response. Then you would click on your pointer button and select the box you just created. To turn the text area into a text field you will click on the buttons and forms button, select the type drop down box and pick the appropriate type. As you can see there are a number of options. Visit http://helpx.adobe.com for more information on form fields and their functionality. Learning Network Queensland | Brisbane North Institute of TAFE 17

Radio Buttons Create boxes of the same size where you would like the radio button group to appear. Select entire group Click Buttons and Forms Open the Type drop down box and select radio button Done! Upon export into an interactive PDF the radio buttons will assume full interactivity. Submit Button Create your submit text or create a box Select text box or created box Click Buttons and Forms Open the Type drop down box and select button Then select the plus sign to add the function ‘Submit Form’ to the button actions list Done! Upon export you will be able to specify where the submitted form is sent using the interactive PDF settings. To create a separate answer sheet simply follow the instructions above again but focus on having minimal information on the answer sheet to cut down on file size. To export go to File>Export>Typ: Interactive PDF. Learning Network Queensland | Brisbane North Institute of TAFE 18

Image effects In order to give the content a more appealing look, try adding some effects to your images. While creating my layout I played around with how I could best display my images to give a more 3D feel to the DPF. Once I came up with something I liked I wrought it down in my ‘Codes Book’ My Codes Book contains colors, effects, fonts and JavaScript for the PDF that I will have to enter multiple times and would like to have consistent throughout the lab. Some images I preferred not to have a background, this way I could make it seem a bit more real. For example the microscope. This I pulled into CS6 Photoshop and cut out the white background so you only viewed the microscope. After importing the new image into my PDF, adding some shadowing, bevelled edges and vua la! It looks 3D…ish CS6 Photoshop – getting rid of the white background To start with we will need to open your image in Adobe CS6 Photoshop Then we will select the Quick Selection Tool and select the image (not the background). This will take a few moments and some fidgeting may be necessary. Once you have fine-tuned your selection right click on the image and select Layer Via Cut. Now you can delete the white background and save the image either as is or as a JPEG to import into your interactive PDF Learning Network Queensland | Brisbane North Institute of TAFE 19

Using small SWF components Flash is not compatible on all platforms unless it is packaged correctly. We have flash components that have previously been created through other Universities (manly in the States as an open resource). This made things a bit tricky but not impossible. We also had pre-existing interactive content created in InDesign which we were simply able to copy and paste from one InDesign file to our current project. If you do not have pre-existing flash content but would like to create some in InDesign please refer to Lynda.com. I imported the SWF (Small Web Format or flash) into my copy of the CS6 InDesign layout which I use as a guide for how everything will fit with the SWF files. In order for them to look fluent I needed to re-export the SWF files with the layout backgrounds and any text within its animated area (I will show you how this is done in more detail later). By exporting flash with the text and color of the page we are able to put an alternate view in places for non-flash compatible platforms. Also note the orange text directing students to the alternate PDF’s (Alt PDF Text). So when viewed from a flash friendly platform you would see: And when viewed from a mom-flash friendly platform you would see: This also means that we need to create PDF alternates for any flash components and link those PDF’s to the ‘Ooops” text. Learning Network Queensland | Brisbane North Institute of TAFE 20

PDF Alternates These will mainly contain pictures and descriptions. Make sure that a fully descriptive ‘ALT Text’ is entered for screen readers. Tagging in a PDF View>Show/Hide>Navigation Panes>Tags Organise as you would in CS6InD. We have loaded all files to our websites FTP and hyperlinked to them in the PDF to make updating the information as easy as possible. Once you have created all of your content and alternate PDF’s we can then move on to our next step. Layering! To do this we need to go to File>Save as>title the file ‘Project Name Complete’. Learning Network Queensland | Brisbane North Institute of TAFE 21

Interactive PDF background Open ‘Project Name Complete’ and File>save as> title the file ‘Project Name PDF background’. This is just to make sure we don’t accidentally save over the first file. Now we can begin creating our background. Delete all small SWF and flash components. Replace the SWF components with “Ooops you don’t seem to be running the newest flash player, click here to view a PDF of this information” (Ooops text) or something along those lines. Save your changes to ‘Project Name PDF background’ Then export as an interactive PDF File>export>Save as type: Adobe PDF (Interactive)>File name: ‘Project Name Layout’ Learning Network Queensland | Brisbane North Institute of TAFE 22

Creating the SWF Export File Open ‘Project Name Complete’ and File>save as> title the file ‘Project Name PDF SWF’. Now we can begin creating our interactive content export. Delete everything that will not be contained in the SWF exports. Here are some examples of exports that required some of the base content, you will need to play around with this a bit as sizing can often times be changed upon export resulting in additional or minimising exported materials for future tries. Here I needed to grab the text with the images in order to input the correct orange text. When the images are visible the orange text should read as the Alt PDF Text. If I had exported this SWF file on a transparent background then the Ooops Text and Alt PDF Text would have overlapped resulting in a mess. Thus my decision to export not only the images but the text as well on the page color background. This way I could simply cover the Ooops Text on my layout with the SWF file, and if the SWF file was un-viewable by the students’ platform then they would see the Ooops Text. Learning Network Queensland | Brisbane North Institute of TAFE 23

Now for an example of fidgeting; to the left you will find a SWF of the Ocular and Objective Magnifications, this was exported with its background for the same reasons of the previous example. Notice the page margins Now notice that the SWF image is outside of those margins, why? Upon exporting this particular SWF with the blue background I found it resized to be smaller than its original version. This meant that I needed to go back to the SWF in InDesign and resize it (make it larger) To export: Select all content that will be contained in the SWF Go to File>export>File name: “name of animation”>Save as type: Flash Player (SWF) Click Save Choose: Export: Selection Background: dependent on whether you want you would like it transparent or not. Click OK Learning Network Queensland | Brisbane North Institute of TAFE 24

Final Steps of Interactive PDF Now for the final steps of putting our interactive PDF together. First things first, open your Interactive PDF Layout. We are going to start with creating any buttons and hyperlinks to alternate PDF’s. Buttons I found a free button image which I thought suited our theme and inserted it into my CS6 InDesign layout. However you do not need a button image, you could simply create larger tap areas on the outer margins of your pages (much like a Kindle or Kobo reader). Either way makes no difference in how you will add the button function to the interactive PDF. 1. In Adobe Acrobat (I am using Adobe Acrobat X Pro) go to Tools > Content > Button. 2. Now click and drag over the area you would like to button to appear. 3. Type in your buttons name. example: Next 4. Click All Properties 5. After all that hard work on the layout we don’t want this button to be visible so go to the Appearance tab and click on the box next to Fill Color: 6. Select No Color 7. Now go to the Actions tab 8. Select the drop down box for selecting an action 9. We are creating a next page action so we will select Execute a menu item 10. Now click Add… 11. Select View>Page Navigation>Next Page 12. And click Close Congratulations! You just created a button, now do it again but this time name it back and select View>Page Navigation>Previous Page. You now have a next and back button. Copy and paste these throughout your interactive PDF were applicable before we move on to the next step. Learning Network Queensland | Brisbane North Institute of TAFE 25

Hyperlinks- PDF’s and Web Pages All of our alternate PDF’s are stored on our File Transfer Protocol (FTP) provided by FileZilla, this allows us to have all of our files in one area and simply to hyperlink to this area from our websites and documents giving us one location to update with new materials that will in hand update that same information to any site it is hyperlinked to. To add this hyperlink I went to Tools>Content>Link 1. Select the Link Action: Open a web page 2. Enter in the hyperlink/web address of you file. Once you have completed all of the hyperlinks for your alternate PDF’s and websites we can begin importing the SWF components back into the lab. To import your SWF files go to Tools>Content>Multimedia 1. Select SWF 2. Click and drag over the area you would like to SWF to appear 3. Click Browse to select the file or enter in the URL to the SWF 4. Check the Show Advanced Options box 5. For a fluent feel I Enabled When: The page containing the content is visible and Disabled When: The page containing the content is not visible 6. Check Transparent background regardless (this will make sure Adobe does not add any additional white outlines to your content) 7. Click OK You now have interactive content embedded into your PDF. If it is not lining up correctly, play around with the sizing of the export from CS6 InDesign. Learning Network Queensland | Brisbane North Institute of TAFE 26

Submit Button So let’s recap, we have added our hyperlinks, we have added our page navigation buttons, we have added our SWF interactive components, what are we missing? Right! The Submit button! Depending on whether you have access to your server or not this will be done one of two ways. For those of you who needed to create a separate answer sheet you will simply add one last button at the bottom of the page in Adobe Acrobat X Pro. Follow the same instructions as above but, under the Actions tab click on the Select Action drop down box and scroll to the bottom to select the Submit a form option. Click Add… Select PDF The complete document To email the answer sheet to the teacher select the text area below ‘Enter a URL for this link:’ and type mailto:[email protected] And for those with Server access, follow the instruction contained in the link below: FDF Toolkit Overview and Reference Acrobat X: Creating Forms with Claudia McCue Learning Network Queensland | Brisbane North Institute of TAFE 27

CREATING AN INTERACTIVE WEBSITE How to begin Brisbane North Institute of Tafe’s Digital Marketing and Webb Producer created a new site hosted off of our current Unilearn website. The basics of how to create your own WordPress account can be found within this link http://en.support.wordpress.com/getting-started/. Or if you just want to jump straight into it you can create an account by following the link http://wordpress.com/. Before beginning, it would be highly beneficial for you to go through the Where to Start information on the WordPress site found below. This will give you a better understanding of the different areas of WordPress and their functions. http://codex.wordpress.org/New_To_WordPress_-_Where_to_Start Once you have read the above article and have set up the basics of your page such as site name etcetera, we can begin creating pages for the lab. Learning Network Queensland | Brisbane North Institute of TAFE 28

Categories First off are Categories. This is important! Without categories all of your posts would end up on the same page and if you have multiple labs that you are creating on the one site then you don’t want this to happen. Create Categories by the labs name, I will show you how to add these categories to your posts very soon. Now to create our lab content! Posts I have done this through Posts First we click ‘Add New’ Notice the bar above the text box, this is our title bar which will appear at the top of the page. I have used this as a subtitle area or topic area. Then I entered the content and lessons in the text box. Because we are trying to make this smart device friendly we need to keep in mind the size of our content. If it is too long then our students will find it tedious and boring to have to scroll though endless amounts of information. To address this, I recommend breaking up your lessons into short bits per page so you can keep scrolling to a minimum. Another way to reduce scrolling is to add tabs. I have accordion tabs and I will show you how to do the same. Learning Network Queensland | Brisbane North Institute of TAFE 29

Plugins First step, install the plugin! You will need to go to the Plugin tab. In this area you can view, manage, activate and delete all of your current plugins. We are going to search for a new plugin that will allow you to use the accordion function. To do this we will select Add New Then type Accordion menu into the search bar. You’ll see a few search results pop up, we are going to Install Now the JQuery Accordion Menu Widget. Then you will Activate Plug-In on the next screen. Learning Network Queensland | Brisbane North Institute of TAFE 30

Accordions Now that we have the needed plug-in we can go back to our post. In order to minimise the amount of scrolling I have used the following code provided by the plug-ins web page. As you can see it is very basic start and end code. This allows some of the information to be hidden until the tab title has been touched, allowing its stored information to then be viewed on screen. Lets preview this coding to see how it looks. To preview your posts simply click on the preview button in the top right of your screen. Learning Network Queensland | Brisbane North Institute of TAFE 31

Here is an example of the post with the accordion menu. As you can see there is the post title at the top, and below is the accordion menu in its starting form. When the student has read the information in the first tab they will select the second tab to view it’s information as shown. And we have now created an attractive way to display larger bits of information in a more manageable and small device friendly way. Learning Network Queensland | Brisbane North Institute of TAFE 32

Beautiful, now let’s move on We have created our gorgeous post, now we need to link it to the correct lab. We will do this by selecting its corresponding category in the Categories box found under the preview box. Quiz Plugin There is a plethora of plug-ins to suit your needs, I recommend searching through them as the ones I have selected may not be best for you. I will however demonstrate another plug-in, our quiz plug-in. We are currently using WP Survey And Quiz Tool for our graded portion of the labs. Here you can see the two quizzes currently created. To add a new one simply click Add New Quiz. There are multiple settings you can enact, to do so hover over the quiz title and select edit when it appears. Learning Network Queensland | Brisbane North Institute of TAFE 33

Creating Sections Because we have images that relate to multiple questions we have chosen in the edit tab to have all questions in a section appear together. To create your sections select Sections at the top of the screen or if you are on the quizzes page hover over the quiz and click Sections when it appears. Then Add Section and title appropriately, the titles will be visible to students taking the quiz. Creating Forms Before we move on to creating questions, we need a way to identify who the person is that is taking the test. To do this we are going to add a small form section to the beginning of the quiz. This is as simple as clicking Form at the top, Add Field’s and Save Question. These automatically appear at the front of the quiz. Now we can move on to creating our Questions. Learning Network Queensland | Brisbane North Institute of TAFE 34

Creating Questions First we will click Questions at the top of the screen. All of your created questions will appear on this page and you will be able to reorder them accordingly. To create a question we will Add New Question. Because we have instructions and images that are the same for multiple questions I needed to create the first question in a very roundabout way. If you require the same thing, first enter the instructions into the Question text. This text can only hold a limited amount of text so if it is a lot of information put the first little bit into the Question text and we will enter the rest a little bit later. Learning Network Queensland | Brisbane North Institute of TAFE 35

Now go through and select what Type of question it will be, how many points it is worth etcetera. The first question will still be contained in what we are creating here. Any additional information that could not be included in the Question Text will go here. This is where I entered the images in html format that would be used for all of the sections questions. I then entered the first question after the images, I will demonstrate why in the next image. This is the student’s view of the above entered question. You can see the generic section text which I entered into the Question T ext. Directly below you will see the images that where entered into the Alternate text box followed by the first question and an answer box. Learning Network Queensland | Brisbane North Institute of TAFE 36

Any other question in the section is much more simply provided that it does not contain images as you would simply enter the question into the Question Text, select your options and then you’re done. Placing Quiz Now, as stated with the Accordion plug-in, the quiz plug-in (and almost all other plug-ins you would install) provides instructions of how to implement its materials into your posts or pages. For example in the quiz plug-in you will notice a line of shortcode at the top of the page. It is this code that we will enter into a post. So first we copy the short code, then we go to the post which we would like the quiz to be on and enter the short code in to the text area like so. Learning Network Queensland | Brisbane North Institute of TAFE 37

Once we hit update and view the post you will see the title of your quiz and the form area. Click next to begin the quiz. *Teachers will need to log into WordPress in order to grade the quizzes. They can provide feedback to each answer given and you are able to limit their access to other materials on the site to prevent any miss haps. For more information regarding roles and accounts in WordPress visit http://codex.wordpress.org/Roles_and_Capabilities. Learning Network Queensland | Brisbane North Institute of TAFE 38

Survey Data WHAT DO STUDENTS WANT TO LEARN AND HOW? At a recent Tertiary Expo we conducted surveys to determine what areas students are interested in studying. We also asked how they liked to receive their materials, contact their teachers, be contacted by their teachers and what type of course format did they most prefer. Students were asked to check all boxes that applied as students may have more than one interest or like studying in more than one mode. Our findings indicated the following Areas of interest were divided into nine groupings Area of Interest Percentage Interested Science related studies 65% Mathematics related studies 11% Language and Business related studies 33% Arts and Humanities related studies 25% Social Sciences related studies 18% IT related studies 9% Health and Medicine related studies 31% Education and Teaching related studies 9% Trades 11% Learning Network Queensland | Brisbane North Institute of TAFE 39

We asked students how they liked to study and how they liked to be contacted. This is what they had to say. Preferred Format of Course Materials Percentage Response EBook 32% Hardcopy 77% Online 8% Video <1% Preferred way to Contact your Teacher Percentage Response Email 61% F2F – in classroom 53% Phone/Mobile 15% Online (Skype, Facebook) 8% Preferred way for Teacher to contact you Percentage Response Email 57% F2F – in classroom 16% Phone/Mobile 41% Online (Skype, Facebook, forum) 4% Text Message 3% Preferred Course Format Percentage Response F2F – classroom 85% Online Classroom 32% Correspondence course 4% Learning Network Queensland | Brisbane North Institute of TAFE 40

Learning Network Queensland | Brisbane North Institute of TAFE 41

For further information about this business activity, please contact the Student and Teacher Support Officer (On-line Development and Special Projects) Name: Carly Bryan Phone: 07 3307 4779 Email: [email protected] Website: www.unilearn.net.au Learning Network Queensland | Brisbane North Institute of TAFE 42