Ask a New Question
Menu

Webpage with light blue background, black text asks; How do you say “orange” in Spanish? There are three clickable buttons; naranja, rojo and anaranjado, with Sorry, Try again! In black text below.

When users click on a button, text should appear that tells them whether they have clicked on the correct answer.

Here are the requirements for your quiz:

Include at least one question.
Include at least three possible answers for your question.
Include a message that indicates whether the correct button was clicked.
You can use CSS to add any stylistic elements that you would like to your web page.

When you have created your web page, test it. (Remember to try the wrong answers!) When you're finished, click on the Share button, and click the Copy Sandbox Link button. Submit the link to the dropbox. If you cannot get the program to work properly, include a paragraph explaining what you did to try to fix it.

Sample HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Quick Quiz!</title>
</head>
<body>
<p>How do you say "orange" in Spanish?</p>
<button type="button" onclick="correct()">naranja</button>
<button type="button" onclick="incorrect()">rojo</button>
<button type="button" onclick="incorrect()">anaranjado</button>
<p id="answer"></p>
</body>
</html>
Sample CSS code:
body {
background: rgb(150, 175, 199);
}

p{
font-family: "Comic Sans MS", cursive, sans-serif; font-size: 20px;
font-weight: bold;
}
Sample JavaScript:
function correct(){
document.getElementById("answer").innerHTML = "You are correct!";
}

function incorrect(){
document.getElementById("answer").innerHTML = "Sorry. Try again!";
}

1 answer

Here’s a complete webpage code that meets your quiz requirements. It includes HTML, CSS, and JavaScript for an interactive quiz about how to say "orange" in Spanish.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick Quiz!</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>How do you say "orange" in Spanish?</p>
    <button type="button" onclick="correct()">naranja</button>
    <button type="button" onclick="incorrect()">rojo</button>
    <button type="button" onclick="incorrect()">anaranjado</button>
    <p id="answer"></p>

    <script src="script.js"></script>
</body>
</html>

CSS (style.css):

body {
    background: rgb(150, 175, 199); 
}

p {
    font-family: "Comic Sans MS", cursive, sans-serif; 
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

button {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#answer {
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    color: black;
}

JavaScript (script.js):

function correct() {
    document.getElementById("answer").innerHTML = "You are correct!";
}

function incorrect() {
    document.getElementById("answer").innerHTML = "Sorry. Try again!";
}

Instructions to Test:

  1. Create three separate files in the same directory: index.html, style.css, and script.js.
  2. Copy the respective code for HTML, CSS, and JavaScript into those files.
  3. Open the index.html file in a web browser to see the quiz in action.
  4. Click each button to test correct and incorrect responses.

Explanation:

  • The HTML structure provides a question along with three buttons for the answers.
  • The CSS styles give it a light blue background and center-aligned text for a visually appealing layout.
  • The JavaScript functions will display messages based on the button clicked, denoting whether the user was correct or not.

This setup should work smoothly. If you run into issues, here are some troubleshooting steps you can take:

  • Ensure all script references and stylesheets are linked correctly in the HTML file.
  • Check if the browser console shows any error messages by pressing F12 (or right-clicking the page and selecting "Inspect").
  • Make sure there are no typos in the function names or HTML element IDs.