Hello fellow coder! This DIY is meant to help guide you through coding your very own quiz.
If you start to see that this DIY is not what you are looking for, and you really just want to come up with quiz questions and answers, check out DIY: Make Your Own Quiz Part I .
However, if you wish to focus more on the coding side of interactives, then you are in the right place :).
This DIY will not only guide you through coding your own quiz using the basic building blocks we put together for you, but you will also be able to customize and style your quiz when you’re done!
Background:
HTML
What is it: HTML stands for hypertext markup language. Long story short, HTML is an engine used to mainly create the content that you see on websites.
Although a lot of people use HTML for the content of a webpage, you can also embed CSS(style)and simple JavaScript(interactivity) into the HTML.
Background:
CSS
What is it: CSS stands for Cascading Style Sheet. Basically, CSS is what coders use to customize and style their webpages. There are two ways to use CSS in your code. Lets learn them!
The first way is embedding your code into your HTML text, internally.
This way only requires you to use the style tag where you wish to use it. We will be using this way later on in this DIY.
The second way* is connecting your CSS to your HTML externally:
This is when you create a seprate CSS document and put all your CSS attributes in there.
*No need to worry about this one because we will not be using it!
Firstly
Download the YR Media template HERE...
This template will give you the basic building blocks so you will not have to worry about things such as standard CSS, HTML and JavaScript links.
After you have downloaded the template, you should open it into a text editor.
You can use Sublime Text, but I suggest using Glitch (you will have to create an account,
but it’s worth it) because Glitch allows you to see updated versions of your code as you make changes to it.
Now let's begin!
Basic Structure: HTML Page
The first thing you see is this tag . This is essential because it lets the text editor know that the document you have is for HTML.
Then, you’ll see link and title tags as well as a few others. These tags are used to set up things like your CSS and also fonts and formats.
The title tag is the text you see on the top as the sticker of a webpage. All of these tags combine to make up what is called the Header:
The code that the user cannot see.
Next
The Body
The body contains text that will be displayed when someone opens it up. It is common to see div and p (paragraph) tags in the body section.
Now, it is time for you to try. You have already downloaded the code, but you also need to create the content.
Use the second link to go to the doc and fill it out. This will make your coding process a lot easier.
Now the moment you have been waiting for... Editing!!!
If you look at your HTML document, it has areas with a double slash(//).
These areas have guiding directions to help you with your coding.
Let’s start off by editing the title.
In all caps the word title is between two header tags (h1 TITLE /h1).
Instead of keeping the text as TITLE, change this to a title that tells people what your quiz is about.
If you look below you’ll see that I changed the title to “Get to Know Shanya Williams”.
Stop! Before we continue with editing, let’s talk about how we got your title to look this way because it would look basic without CSS.
One of the CSS properties that our title has is alignment( align= “center”). You could also use the styles tag (style= “text-align:center”) to center the text.
You can also see that the title is not black, the standard text color. This is due to the text color property. You can use this by stating style= “color: purple” the text you want to change the color of would go between the style tags.
Other CSS properties you can use
I only told you a microscopic amount of CSS properties at your disposal but there are hundreds more.
Below is a few more ways you can style your website. You can use all of these by using the styles tag.
Inside of the “”, you put one of the following styling and if you want to add multiple ones, just separate them with a semi-colon (;)
-background-color: green;
-border-width: 3px;
-border-radius: 50%;
-padding-top: 30em;
-margin-bottom: 3px;
-border-color: #0099ff;
-width: 40%;
-justify-content: center;
-letter-spacing: 3%;
-cursor: pointed;
-font-size: 30px;
-font-weight: bold;
-height: 30%;
-width: 40%;
-justify-content: center;
-overflow: scroll;
-letter-spacing: 3%;
-position: relative;
-overflow: scroll;
How to use them - An example:
(style=“background-color: red; border-width: 7px;”) (SHANYA)
Although some of these properties you may not know, there is no need to fear, Shanya is here (if not, then you can learn more about them at CSS Tricks.
Entering the questions
What are we doing: We are going to take the answers you entered in the document and put them in the quiz.
Looking at your document, copy your first question (command C on a mac) and paste it (command V) into where your HTML that has QUESTION #1 in all caps.
Entering the options/ answers
Similar to inputting the questions, find the areas in the HTML document that have OPTION #1;1 in all caps and change it to the
first option the viewer could choose for the first question. The semi-colon between the numbers is meant to indicate that it is the first option
for question #1. For example, if you wanted to put in the 3rd option for question #4, you would replace the text that says OPTION #4;3.
Check-in!
No need to stress! We did a lot already and we still have more to do. I want to take a minute to make sure you are on track. On the right is a list of all the things that you should have in your code. list of all the things that you should have in your code.
* Changed the title of the webpage to the title that fits your quiz. Style it if you want to.
* Change all the question prompts to the questions you put in the document.
* Change the option prompt to the option choices for each question.
We’re almost done!
Why do people take quizzes???
Results are a big part of the reason people take quizzes in the first place.
Now that we have worked on the questions, the options, and even a little bit of CSS, we can move on to getting the score or end result.
CLICK HERE to fill in the results part of your quiz.
Almost there!
Why do people take quizzes???
The results are where things get a little too complicated to teach you now,
but make sure you complete the document so that we can finish making a quiz that you can be proud to be a part of.
The next slide shows you the design of the quiz.
The screenshot on the left is what the viewer will see before choosing an option.
The screenshot on the right is what the viewer will see after choosing an option.
Make sure all your information is accurate and correct because if it is not, then your work could be in danger of not being put on our website.
There’s more!!!
Just kidding ;). You have reached the end. You are now at your final check-in. (Yayy!!!)
Below is a list of everything that need to be done before submitting your work.
- Changed the title of the webpage to the title that fits your quiz; You could have styled your content; Fill out questions and options part of document; Put the option prompt to the option choices of each question into the code; Filled out results part of document; Be Cool!😎
Well... What happens now?
Now that you have put all the pieces together, send it in! Once you send it in, we will review your responses and maybe the next time you see it, your finished quiz will be on your website 🙂. The link to send in your spreadsheet is below.
