Choices (HTML Form Elements)
choices.html
<!DOCTYPE html>
<html>
<head>
<title>Choices</title>
<link rel="stylesheet" type="text/css" href="choices.css">
</head>
<body>
<p><h3>Listbox:</h3>
<select id="feeling">
<option value="happy">I was happy with the customer service</option>
<option value="ok">The customer service I received was OK</option>
<option value="unhappy">I was unhappy with the level of service</option>
</select><br>
<hr>
<p><h3>Checkboxes:</h3>
<input type="checkbox" id="contact" checked>
<label for="contact">I would like to be contacted about my experience</label><br>
<input type="checkbox" id="marketing" checked>
<label for="marketing">I would like to receive marketing material</label><br>
<hr>
<p><h3>Radio buttons:</h3>
<input type="radio" name="time" id="AM" value="Morning" />
<label for="AM">contact me in the morning</label><br>
<input type="radio" name="time" id="PM" value="Evening" checked />
<label for="PM">contact me in the evening</label><br>
<hr>
<p><h3>Range slider:</h3>
<input type="range" id="rating" min="0" max="10" step="1" list="tickmarks">
<datalist id="tickmarks">
<option value="2">
<option value="5">
<option value="8">
</datalist>
<br><hr><br>
<input type="button" onclick="getChoices()" value="Completed">
<script src="choices.js"></script>
</body>
</html>
choices.css
body{
background-color: azure;
}
choices.js
function getChoices(){
feeling = document.getElementById("feeling").value;
contact = document.getElementById("contact").checked;
marketing = document.getElementById("marketing").checked;
var times = document.getElementsByName("time");
for (var when = 0; when < times.length; when++){
if (times[when].checked){
time = (times[when].value);
break;
}
}
rating = document.getElementById("rating").value;
alert("Feeling? " + feeling);
alert("Contact? " + contact);
alert("Marketing? " + marketing);
alert("Time? " + time);
alert("Rating? " + rating);
}
- Change the headings to better headings, such as Rating, Feeling, etc. Add questions to improve the UX (such as "How was your experience today?". Change answer values as well in HTML if it helps.
- Can you improve the layout and styling of the page?
- Can you embed some of these controls into previous programs, such as dice roll, maths games, or other chance games, to improve the UX when it comes to making choices or getting input from the user?