dream weaver workshop

8/6/2019 Dream Weaver Workshop

http://slidepdf.com/reader/full/dream-weaver-workshop 1/19

Creating Quizzes in Dreamweaver MX

1. Open a new blank page. FILE NEW SELECT BLANKPAGE CLICK CREATE

2. Create a form field in which to “build” your quiz. From the Insert menu choose Form .This inserts a form field. Everything within the red dotted lines is partof the form.



Inserting Form Objects

A Text Field:

1. First, from the Insert menu, choose Form Object and then TextField . This will insert a box where users can type their name.



2. Make sure the field is selected and the Property Inspector is upsince this is where the options will be selected.



A Text Box

A multi line text field allows the user to input multiple lines of text. Hit<Enter> so that a new paragraph is created under the first entry.Make sure you are still within the form field. If you want to create anessay question you can now type in your question just as you would ina word processing application. Hit <Enter> once again so that a newparagraph is created under your question.



2. From the Insert menu, choose Form and then Textarea .



3. In the Property Inspector , after Type , select Multi line . Enter aname for the TextField , and a numerical value for Char Width andInit Val . After Num Lines , enter the height you'd like the text field tobe. The scroll bar will become active if students type more than the

number of lines set by you, so don’t worry. After Wrap , choose anoption. These will change how text wraps within the box. Default works unusually well.



A Radio Button:

1. Hit <Enter> so that a new paragraph is created under the lastentry. Make sure you are still within the form field. If you want tocreate an essay question you can now type in your question just asyou would in a word processing application. Hit <Enter> once againso that a new paragraph is created under your question.

2. A radio button allows the user to choose only one option. Type"What color is my sweater?" followed by a space on the next linedown. From the Insert menu, choose Form Objects and then RadioButton .



3. Click the space next to the new button, type “Black." Hit <Enter> again, insert another button, click the space next to it and type"Brown" right after it.



4. In the Property Inspector , enter a unique name for theRadioButton and Initial State for the button. After Checked Value ,enter the gender the button will specify. The example below shows the

properties for the radio button that I created for the answer “Black”.



A Button:

1. A button can be created to allow the user to submit his/her choicesor reset the form. On the next line down, from the Insert menuchoose Form Objects and then Button .



2. Enter a name for the button in the Property Inspector . AfterLabel , enter the text that will appear on the button. After Action ,make sure Submit form is selected.



3. If you want to, you can insert another button now. This time, makesure the Action is Reset form and it will allow the user to reset allthe selections they made to the defaults.

4. (Optional) Creating popup responses to buttons. This can come in handy if you want to create a self evaluated quiz.Note that only the final answers chosen by the student are emailed toyou. To format the radio button correctly, you will need to edit thecode of the button. Right click on the radio button, then view yourbutton's code by clicking on Edit Tag Code <input> .



The HTML Source window will open, with the corresponding codehighlighted, as shown below.



Before the last > in the highlighted HTML, type in onclick="alert('')" . The section you edited should look like this:

<input type="radio" name="Question3" value="Black"

onclick="alert(' ')">

Inside the single quote marks, type in the feedback for the firstanswer. For the sample quiz, it would be the words Sorry, try again .You may want to use Correct and Incorrect , or give other feedback.Make sure your feedback does not include commonly used HTMLcharacters like quotation marks or apostrophes. The line should nowread something like this:

<input type="radio" name="Question3" value="True"onclick="alert('Sorry, try again.')">

Modifying Form Properties



So how do we get the quiz answers from the students to you? Youneed to know how to send it to a specified email address.

1. Click on the red outline of the form and notice the change in the

Property Inspector .

2. Enter a name for the form. After Action , enter "mailto:your emailaddress." After Method , make sure POST is selected.



If you stop now and someone returns the form to you filled out, it willcome back as a document that is very hard to read. To get it in plaintext, make the following change.

3. Right-click somewhere within the form that has no formatting, nearthe very top or very bottom. On the menu that comes up, you shouldbe able to select Edit Tag <form> . Enter the attributeenctype="text/plain" somewhere within the form tag.

dream weaver workshop

Documents