Skip to main content

CIS 371

CSS and HTML

Winter 2020

Based on an assignment originally developed by Prof. Engelsma.

GitHub Classroom URL: classroom.github.com/a/txkne0og

RIT Survey

Objective

The objective of this assignment is to provide students with practice writing HTML and CSS.

Part 1: CSS

Craft CSS code for the following scenarios. You must craft your CSS by hand – do not use any third party CSS or JavaScript libraries in your solutions. Avoid duplicating CSS rules when possible. I suggest adding the CSS to the head of each .html file in the git repo. Feel free to suggest an alternative.

Please complete this assignment individually.

Problem 1
Sample Output for problem 1

HTML Source:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Problem 1</title> </head> <body> <h1> Example 1 </h1> <div class="important"> <p> <span class="bigtext">C</span>urabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p> </div> <p id="signature">Mad Tertulous</p> </body> </html>

Specifications:

  • h1 is centered with text color purple.
  • The element marked with id=”signature” is right justified italics.
  • First character in the paragraph is the Georgia font family and 40px in size.
Problem 2
Sample Output for problem 2

HTML Source:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Problem 2</title> </head> <body> <p id="topleft"> I am top left </p> <p id="bottomleft"> I am bottom left </p> <p id="topright"> I am top right </p> <p id="bottomright"> I am bottom right </p> <div class="centered_green_box"> <p class="centered"> Centered </p> </div> </body> </html>

Specifications:

  • left justified text has a left margin of 5px.
  • Right justified text has a right margin of 5px.
  • Top/bottom margin is default.
  • Size of the box is 100px X 100px, with background color #00FF00.
  • Be sure the center of box stays in the center when the screen is resized. (The center of the box should be centered, not the top, left corner.)
Hint: For the box, use absolute positioning and calc for compute the location.
Problem 3
Sample Output for problem 3 Sample Output 2 for problem 3

HTML Source:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Problem 3</title> </head> <body> <p> Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. </p> <div class="fancy_quote">Posuere erat a ante venenatis dapibus! onec ullamcorper nulla non metus auctor</div> <p> Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> </body> </html>

Specifications:

Problem 4
Sample Output for problem 4 Sample Output for problem 4

HTML Source:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Problem 4</title> </head> <body> <div class="box redbox"> Get ready! </div> <div class="box yellowbox"> Get set! </div> <div class="box greenbox"> Go!! </div> </body> </html>

Specifications:

Problem 5
Sample Output for problem 5

HTML Source:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Problem 5</title> </head> <body> <ol> <li> <a href="#1"> Link #1 </a> </li> <li> <a href="#2"> Link #2 </a> </li> <li> <a href="#3"> Link #3 </a> </li> </ol> </body> </html>

Specifications:

Part 2: Quixx Board

Implement the board for the "pencil game" Quixx.

This assignment must be completed indivdually. You may not share code; but, you are encouraged to share high-level ideas with each other including:

Expect Part 2 to take much longer than Part 1.

Hints:

Quixx board

Part 3: Quixx using a template

Use an HTML templating system to generate the Quixx board.

21 x 6 Quixx board

Part 4: Implement the game

GitHub classroom link: classroom.github.com/g/cIUHZHJO.

Add JavaScript to your Qwixx board so that you can play the game. You can find the rules here: gamewright.com/pdfs/Rules/QwixxTM-RULES.pdf

Rules:

Ideas / Suggestons:

Setting up Jest

To run your Qwixx code directly in a browser, you will want to use the ES 6 module import syntax. This ES6 syntax is different from the CommonJS syntax used by Node, which causes problems when testing. To address the differing import syntax, we will use a package called Babel to transform the code into something that Node handles. To set up Jest using Babel:

  1. Set up npm in your project: npm init -y
  2. Install Jest: npm install --save-dev jest
  3. Install Babel: npm install --save-dev babel-jest @babel/core @babel/preset-env
  4. Configure Babel by creating a file named babel.config.js with the following content: 
    module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};
  5. Edit the "scripts"/"test" property to equal jest

You can now run your Jest tests from the command line with npm test.

Note: If you choose to use the starter code from GitHub classroom, these steps have already been completed. You need only run npm install.)

Rubric

This assignment will be scored out of 60 points, with opportunities for extra credit.

PointsRequirements
30Basic functionality and minimal model testing
10Correctly calculates score
10Correctly enforces rules
5Complete and thorough unit tests
5+A "bonus" of your choice (make the game multi-player, make the game work with a dynamically chosen board size, etc.)

Note: In order to receive a grade for this assignment, your submission must, a minimum:

Submission

I will grade the parts of this assignment separately.

Please fill out this survey from RIT when you have completed Part 4.

Updated Saturday, 4 April 2020, 4:41 PM

W3c Validation