GWC Jeopardy (11/13)

HTML

Javascript

CSS

Misc

Debug

100

Find and fix the error in the following code:

<div>

<p> Pumpkin pie is the best type of pie ! <p>

</div>

Ending <p> tag needs a slash, so <p> → </p>

100

What are the possible results of this code?

Math.floor(Math.random()*3)-1

-1, 0, 1

100

To center the frog horizontally in the pond, which property and value should be used?

justify-content: center;

100

Fill in the blank to link the HTML to the CSS:

stylesheet; style.css

100

This HTML tag is used to insert a line break in text, allowing content to continue on the next line without creating a new paragraph.

What is <br>?

200

What will the following code output?

<ul>

<li>Go to school</li>

<li>Eat dinner</li>

<li>Go to sleep</li>

</ul>

Go to school
Eat dinner
Go to sleep

200

I want to change my element with id=“x” to say “hello”. What is the problem with my code?

document.getElementById(“x”) = “hello”;

Must add .innerHTML

200

Why is this CSS rule not applying a border to the image?

img {

border: solid 5px;

}

The border color is missing. It should be specified, such as border: solid 5px black;

200

<a>

What is the tag you use to add hyperlinks in HTML?

200

This CSS property is used to set the background color of an element. Complete the code below:

cssCopy code

div {
______: red;
}

What is background-color?

300

Identify the error in the code, and figure out a potential solution:

<div>

Watch this video on pumpkin pie !!

</p>

</div>

You cannot directly put an href attribute into a paragraph tag. Instead, you could fix the code by doing:

<div>

<p>

Watch this <a href="pumpkinpie.video"> video </a> on pumpkin pie !!

</p>

</div>

300

Fill in the blanks so that this button calls myFunction() when it is clicked.

onclick = “myFunction()”

300

You want a grid item to span two columns, but it’s only appearing in one. Your CSS code is:

.item {

grid-column: span-2;

}

The correct property value is grid-column: span 2; without the hyphen

300

function checkEvenOdd(num) {
if (_____) {
return "even";
} else
{
return "odd";
}
}

what is num % 2 === 0?

300

This CSS property is used to hide an element, but it still takes up space in the layout. If you wanted to use JavaScript to toggle this property for an element with id="menu", you would write:

javascriptCopy code

document.getElementById("menu").style.______ = "hidden";

What is visibility?

400

What does colspan=”2” do in the following code?

<body>

<table>

<tr>

<th>Birthday</th>

<th>Grade</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

The colspan=”2” makes the “name” heading take up 2 columns of space.

400

I am trying to create a function diff5(x) that returns the difference from 5 of any number x. For example, diff5(1) returns 4, diff5(-3) returns 8, diff5(7) returns 2, etc. However, my function doesn’t work for every number. Identify the problem and fix it. (Hint: there is more than one solution!)

function diff5(x){

var ans;

if(x > 5){

ans = x - 5;

}

if(x < 5){

ans = 5 - x;

}

return ans;

}

The problem is that ans is undefined for x = 5. Possible solutions: initialize ans to 0 at the beginning; change either ‘if’ statement to be <= or >=; change one ‘if’ statement to an else statement; add a third ‘if’ statement for x = 5.

400

This property is used to create space outside an element, pushing it away from neighboring elements.

margin

400

If wanted to insert an image with a link of "amongus.png", and I wanted the width to be "700" and the height to be "500", write the code that would make this happen.

<img src="amongus.png"

width= “700”

height= ”500”>

400

Write the HTML code to create a ordered list that represents a shopping list with the following structure:

Groceries
- Fruits
  - Apple
  - Banana
- Vegetables
  - Carrot
  - Lettuce
- Dairy
  - Milk
  - Cheese

<ul>

<li>Fruits

<ul>

<li>Apple</li>

<li>Banana</li>

</ul>

</li>

<li>Vegetables

<ul>

<li>Carrot</li>

<li>Lettuce</li>

</ul>

</li>

<li>Dairy

<ul>

<li>Cheese</li>

</ul>

</li>

</ul>

500

Fill in the blank tags to make an ordered list (Eg: 1. buy tomatoes, 2. do math homework, etc…)

<__>

<__>Buy tomatoes !<___>

<__>Finish math homework<___>

<__>Sleep by 9pm<___>

<___>

<ol>

<li>Buy tomatoes !</li>

<li>Finish math homework</li>

<li>Sleep by 9pm</li>

</ol>

500

Say you are creating a magic 8 ball program. You have an empty paragraph with id=”ans”. Build the function getAnswer() to have a 50/50 chance of changing the paragraph to say “Yes” or “No.” You will need to use an if/else statement and Math.random(). We have also challenged you to use a variable.

function getAnswer(){

var x;

if(______){

________

}

else{

_______

}

_________ = x;

}

function getAnswer(){

var x;

if(Math.random()<0.5){

x = “Yes”;

}

else{

x = “No”;

}

document.getElementById(“ans”).innerHTML = x;

*May vary slightly.

500

In Flexbox Froggy, you are tasked with making the frogs fill the entire width of the container, with equal space between each frog, but no space before the first frog or after the last frog. Write the CSS for the container to accomplish this layout.

.frogs {

display: flex;

justify-content: space-between;

}

500

You have a JavaScript function called checkTemperature that takes an integer parameter temp. The function should:

Return "too hot" if temp is greater than 20.
Return "just right" if temp is equal to 20.
Return "too cold" if temp is less than 20.

function checkTemperature(temp) {
if (temp > 20) {
return "too hot";
} else if (temp = 20) {
return "just right";
} else if (temp < 20) {
return "too cold";
}
}

500

Write JavaScript code that:

Selects an element with the ID menu.
Changes its visibility to hidden.
Adds a CSS rule that sets its background-color to pink.

// Select the element with ID "menu"
let menu = document.getElementById("menu");

// Change the visibility to hidden
menu.style.visibility = "hidden";

// Add a background color of pink when hidden
menu.style.backgroundColor = "pink";