Create a simple web page that contains a JavaScript form that will allow the user to answer 7 trivia questions Your trivia game should contain 2 text boxes 2 select dropdowns (4 options min) 2 multiple choice questions (using radio buttons, 4 options min) 1 choose all that apply (checkboxes, 4 options min, one answer should be None of the above ) No part points for semi correct answers The questions can cover any topic you wish but please keep it professional and easy enough that the average person could get a few correct you can keep the question part empty I will put questions Don't bother wasting time on that Before the user is allowed to calculate and display their final score on the screen, ensure that they have filled out all of the fields or made a selection choice in all of the questions You might want to consider disabling the button or perhaps you would rather prevent the display of the results using your program logic Without using an alert(), prompt(), or confirm() or console log, make sure the user is aware of any issues in the form These messages should be cleared when the user fixes them Use common sense real world validation for your form (Do not allow empty fields, if numeric only, if letters only, ensure at least one item is checked in each group, these are just some examples) For your button, ensure to use If the user has filled in all responses (or selected a response), then you must check to see if they entered the correct answers and calculate their score You can hard code the correct trivia answers in your code Ensure that any typed responses are not case sensitive Quick, incomplete example If (document getElementById(answer1) value Monkeys) Add one to correctScore tally score Only check their trivia answers if they have given you valid data Don't calculate and display a score unless you have good data After you have corrected all of their responses, display their final grade as a percentage on the screen (in an output div somewhere using innerHTML) Round their percentage result to 2 decimal places) If their grade is between 0 and 50 color the text red between 51 79 color it orange 80 color it green Ensure that all of your html content is a div with an id of container Give this div a 1px solid green border with 5px of padding 10px of top margin too Div should be centered horizontally with a width of 800px Div content should be left aligned Add some user instructions and flair to make your page professional looking and or visually appealing HTML Page trivia html JS Page trivProcess js Matrix Proper code alignment, nesting, lowerCamelCasing, page titles and names (all files) Informative, spell checked header and inline comments (all files) All js code is wrapped in functions HTML, CSS, and JS are kept separate can't use onclick event directly on html button must use attachEvent or addEventListener in js HTML container div and CSS as requested Bootstrap CSS is employed on all form elements as well as the page in general Form is set up properly using proper form controls and layout Including simple user instructions Field validation is in place for all fields and works as requested Validation occurs before any score results are output Calculation logic for score is correct Score is rounded Color scheme for score result text For each question, create a 'hint' button this button would cause an alert box to pop up and provide the user with a hint for that specific question

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 25, 2024

Create a simple web page that contains a JavaScript form that will allow the user to answer 7 trivia questions. Your trivia game should contain:

Create a simple web page that contains a JavaScript form that will allow the user to answer 7 trivia questions.

Your trivia game should contain:

2 text boxes
2 select dropdowns (4 options min)
2 multiple choice questions (using radio buttons, 4 options min)
1 choose-all-that-apply (checkboxes, 4 options min, one answer should be "None of the above"). No part-points for semi-correct answers.

The questions can cover any topic you wish - but please keep it professional and easy enough that the average person could get a few correct.

you can keep the question part empty. I will put questions. Don't bother wasting time on that.

Before the user is allowed to calculate and display their final score on the screen, ensure that they have filled out all of the fields or made a selection choice in all of the questions. You might want to consider disabling the button or perhaps you would rather prevent the display of the results using your program logic. Without using an alert(), prompt(), or confirm() or console.log, make sure the user is aware of any issues in the form. These messages should be cleared when the user fixes them.

Use common-sense / real-world validation for your form. (Do not allow empty fields, if numeric only, if letters only, ensure at least one item is checked in each group, these are just some examples). For your button, ensure to use