Bootstrap, Grids and Radio Buttons¶

Today, we'll learn about Bootstrap, grid systems and review radio buttons.

Plan¶

1. Announcements
2. Recap Grid Systems
3. Answer your questions
4. Demo Quizzes
5. Breakout rooms

Announcements¶

• Grading status

Recap Bootstrap¶

• A file of CSS classes to load and use
• Optional files of JS code
• either a fixed-width or fluid container
• options for a grid layout: app columns from base columns
• nice combinations of HTML and CSS like cards

Compare:

coffeerun with BS 4

and

coffeerun without BS 4

Recap Grid Systems¶

Grid systems are pretty common. Look at Facebook or the NY Times. It's pretty common to be able to point to a page and be able to say "the left column" or the "middle column"

You don't have to use a grid system, but it can be useful.

Two common patterns:

• Bootstrap-style systems based on flexbox and comprising rows of columns
• Even newer grid systems based on the new CSS grid property

Newer Grid Systems¶

The newer grid CSS properties can do a lot of what Bootstrap-style layout can do, without needing to put .row structuring elements.

Because the layout is all done in the CSS, it's easier to change it via a media query or some such. (Though it's harder to try to move an element from one .row to another.)

The basic ideas are:

• rows/columns with gutters between
• elements can have fixed or flexible sizes (like flexbox)
• you can often do all the layout work in one container (my solution to quizzes does this)

MDN Grid Systems

I'm still learning this, but the Firefox grid inspector helps a lot.

An example using the new grid css: grid example page

Your Questions¶

I'll answer your questions

Demo of Assignment¶

I'll demo the Quizzes assignment, which will

1. Use a grid to lay out the page (either Bootstrap or modern grid)
2. Use a .js file that contains some multiple-choice questions.
3. Dynamically create as many quiz questions as there are in that file
4. Add a function to grade a quiz question.
5. Use event delegation to grade any question with just one function.

You already know the theory of how to use grid. Now, go through some steps, and we'll make sure you know how to create a radio button set.

Radio Buttons¶

Radio buttons are good when you want to force people to make a choice among a set of options. (Drop-down menus can work, too.)

Suppose we are selling T-shirts. They come in either blue or red. Here's how we might do that:

<form>
    <label>
       <input type="radio" name="color" value="red">
       Le Rouge
    </label>
    <label>
       <input type="radio" name="color" value="blue">
       Le Bleu
    </label>
    <input type="reset">
</form>

In action:

Some important points:

• two different controls have the same name. That's how the browser knows that they are in a radio group, so that if one is selected, the other is de-selected. Two different elements can't have the same id but they can (and in this case, must) have the same name.
• the label associates a piece of text with a button. Here, we put the text after the button. You can imagine other layouts that makes the association less obvious. Or maybe someone is blind, and doesn't see the layout at all. The label is crucial for accessibility
• Even better, by using label the label text becomes a synonym of the radio button itself, which means you can click on the text as well as on the tiny button. That helps everyone!
• The label description doesn't have to match the value. Usually it does, but it doesn't have to. Here, we switched between English and French.
• Initially, neither is checked. So what is the value?
• The reset button only works if the inputs are wrapped in a form

Determining Value¶

Visit this page in a browser and open the JS console to try the following:

$("[name=color]");

Unsurprisingly, this selector finds two inputs. Now try the following jQuery incantation:

$("[name=color]").val();

Check a value and try the incantation again. Check the other value and try it a third time.

Refresh your page to make the radio buttons unchecked. Then try this incantation instead. Try it for all three states.

$("[name=color]:checked").val();

You can also try

$("[type=radio]:checked").val();

Breakouts¶

• Work on Quizzes

Summary¶

We learned about grid systems, which automates some of the tedious parts of making a responsive, multi-column page.

We learned about how to build radio buttons, using a shared name attribute to indicate the group.

We saw how to use jQuery's .val() method to get the current value of a set of radio buttons.