Task outline
Make the website functional by adding an interactive quiz.
Complete the following:
- Use multiple choice answers and a submit button for each question.
- After submitting, button must be greyed out.
- Feedback is either a:
- green tick and green background to correct answer. text.
- red cross and red background to incorrect answer text.
- Show number of correct answers and total number of questions answered after each question.
- Calculate parentage (user most invoke this by pressing a button). This button must be greyed out until all questions have been attempted.
- This must be created as a card and placed on the ‘My Faith’ page.
- All code must be validated.
Technologies to be used:
- HTML
- CSS
- JavaScript (JS)
Output or results of activity
Quiz
The quiz works as planed.
I found this an interesting project to complete.
Comments on knowledge and skills demonstrated
I used a lot of already learned knowledge to create the HTML and style with CSS. However, I needed to learn more JS in order to complete the project. This involved searching the internet and finding suitable learning and resource sites. For this project I used a lot of functions and both local and global variables. With some thought, I was able to put some code into functions that can be called by the other functions when needed; thus, cutting down on repeated code. I chose to used radio buttons for the questions since only one answer is needed to answer a question.
Figure 1 example of question with radio buttons used to select an answer.
Figure 2 example of correct and incorrect answers.
Areas investigated and things learned:
- Using variables in HTML. This involved finding out about
<var>elements. - I learned about using
word-break: break-all;in CSS to brake up long unbroken example code displayed in HTML. This is handy for small view ports. - Learned about and how to use the JS’s
.createElement()to creat a new HTML element. - Learned about JS’s
.appendChild(), which creates and appends a new element in the specified HTML. - Learned about JS’s
.disabled = true, which is used to disable a button. - Code to indicate that JS functions where awaiting use by user activity.
/*eslint-env browser*/at the top of the JS page stopped a lot of non-defined errors and/* exported functionName */stopped defined but never used errors, however, this needed to be placed just before the function or at the top of the page in a list separated by commers. - I learned to tidy up the JS and make it easier to read.