Exercise 3 – XHTML and JavaScript Using XHTML and JavaScript you have create a web page that allows users to choose the colour and design of a sofa (see figure 1). Figure 1: Sofa personalisation web page The document begins with a heading level 4 (Choose the colour you would like:), which is followed by a group of 4 radio buttons, labelled Red, Blue, Orange and Green. Whenever a button is selected by the user, an alert message must be produced stating the chosen colour (see figure 2). Figure 2: A message is displayed in response to selecting a radio button Then the document contains another heading level 4 (Choose the design you would like:), which is followed by 3 buttons. When clicked each button changes the image which is displayed below. For example, when the “Design 2” button is pressed, the image changes to show the second sofa design (see figure 3). Figure 3: the “Design 2” button is pressed Additionally there is a text box above the image, which displays the currently chosen design (e.g. “This is Design 2”). By default the fist design is shown by the image and the textbox (see figure 1). Finally there is a Submit button with label “Submit Request” (Note: the submit button does not need to do anything for this exercise).
Exercise 3 – XHTML and JavaScript
Using XHTML and JavaScript you have create a web page that allows users to choose the colour and design of a sofa (see figure 1).
Figure 1: Sofa personalisation web page
The document begins with a heading level 4 (Choose the colour you would like:), which is followed by a group of 4 radio buttons, labelled Red, Blue, Orange and Green. Whenever a button is selected by the user, an alert message must be produced stating the chosen colour (see figure 2).
Figure 2: A message is displayed in response to selecting a radio button
Then the document contains another heading level 4 (Choose the design you would like:), which is followed by 3 buttons. When clicked each button changes the image which is displayed below. For example, when the “Design 2” button is pressed, the image changes to show the second sofa design (see figure 3).
Figure 3: the “Design 2” button is pressed
Additionally there is a text box above the image, which displays the currently chosen design (e.g. “This is Design 2”). By default the fist design is shown by the image and the textbox (see figure 1).
Finally there is a Submit button with label “Submit Request” (Note: the submit button does not need to do anything for this exercise).
Trending now
This is a popular solution!
Step by step
Solved in 4 steps with 4 images