CSS for long division applet

At one time, I avoided learning CSS because it seemed like that was a “woman thing” and in my career, I have noted that if you are in a primarily female field you get paid less money and people give you more shit than in predominantly female fields – thus, construction workers make more than administrative assistants, computer programmers make more than nurses. Of course there are other differences all the way down the line, but it is a strong enough relationship that when it seemed to me that women were doing more CSS and HTML, I tended to shy away from that as “not real programming”.

Well, that was stupid.

CSS is now my friend and has made many things in my life easy. For a simple example, let’s look at the long division applet I was posting about earlier before I went off on a tangent. The point of this is to allow students to practice long division, not to test them.

The CSS here is in two parts.  First, there is an external style sheet

<link rel=”stylesheet” type=”text/css” href=”lakestyle.css” />

this defines some classes that are the same throughout the game. Then, I have a small style section in the page that is just those styles specific to this page.

However, to make this more generalizable, I have copied all of the classes used into the style specified below so if anyone likes, they can take the two previous posts on the javascript, this one and the next one on HTML and make their own long division program. I hate when I read something and they have left out parts that are required for it to work. That’s so annoying.

The first part sets the container size. We do this in all of our pages so they look the same on every laptop or desktop regardless of screen size. I also have that orange background image because The Invisible Developer said it should have a background and this site, speckyboy, which often gives away really free graphics, was giving away textures that week.

Yes, I used tables (don’t judge me!). Although I don’t always use them, I am not one of those people who believes in doing backflips with CSS, javascript and HTML to avoid tabes.

The table will have one cell for the one-digit divisor and another for the three-digit dividend. (This matches a common core math standard for fourth-grade “Find whole-number quotients and remainders with up to four-digit dividends and one-digit divisors, using strategies based on place value, the properties of operations, and/or the relationship between multiplication and division”.)

I want the width of each table cell set at 25%. I want the font size to be xx-large so the problem stands out on the page.

The q class defines a border at the bottom an element, in this case, a table cell.  That is what gives us the top of the division problem “tableau”. I could have made it an ID but I didn’t because I thought I might add it into the external style sheet eventually and use it in other pages.

The d class is for those cells that will show up sequentially as we solve the division problem. If you read the previous posts on the javascript for this, you’d see that as each digit of the quotient is found, we multiply it by the divisor and put the product under the dividend. It’s usual to show a line under that and subtract. So, the d class is underlined. However, when we start, those cells are empty and it would look kind of dumb having just lines there, so, when we start, the cells are hidden and they are filled in and shown, complete with underline, as we solve each step in the division problem.

The c id is a cell where the divisor is. It has a line on the right side to make the other part of the thingy that goes around a division problem. I also want the divisor right up to the side of the cell so it looks like a regular division problem.

The w class has a white background, so you can see the problem.

The hidden class is for all of the elements we want hidden when the page originally loads. This includes the input form for the second digit in the quotient. We want to force the student to find the first digit, multiply that out and then find the next digit.

And, that’s all there is to the CSS for the long-division examples.

Next post, I’ll finish off with the HTML

<style>
#container {

height: 670px;
width: 1000px;

background-image: url(orangbg.png);
background-repeat: no-repeat;

}
td {
width: 25%;
font-size: xx-large;
}
.q {border-bottom: 7px solid #804040;}
.d{
display: none ;
text-decoration: underline ;
}
#c {
text-align: right;
border-right: 7px solid #804040;
}
.w{ background-color: white;}

.hidden { display: none }

</style>