HTML/CSS/JAVA Can't figure out how to make questions and answers

Maripo31 · September 28, 2023, 1:40pm

Hi, my name is Maripo, I’m learing Front-end developement, I’m currently working on a project called WhatsWorthMore ( it’s a web game where you click on an image you think is worth more, if you guess right your score goes up, if you guess wrong you get a screen for play again)
Ok to get the gist of it, I’ve been trying for atleast 1 week to try and make the java work so the code functional, but no matter how much I tried nothing worked, I even tried chatgpt and some other sites and have no idea how to make:

A const that holds all my items and text,
A function that gives random items and the same text ( for the items(imgs))
A working score
When clicking on an item(img) that is worth more to, to load in another 2 random items(imgs) and on and on, if you guess wrong it gives you a screen to play again or exit.

Here is the HTML/CSS/JAVA:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Whats Worth More</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
    <main>
        <div id="main-page">
            <header class="navbar">
                <h1><a href="#">WWM</a></h1>
                <nav class="nav">
                    <ul>
                        <li>
                            <a href="#">Play</a>
                            <a href="#">Categories</a>
                        </li>
                    </ul>
                </nav>
            </header>
        </div>
        <section class="main">
            <div class="wwm">
                <h2 class="title">Whats Worth More</h2>
                <button class="play">Play</button>
            </div>
        </section>
        <div class="popup" id="popup">
            <div class="popup-content">
                <h2>Select a Category</h2>
                <div class="categories">
                    <button class="category">Random</button>
                    <button class="category">Boats & Planes</button>
                    <button class="category">Watches</button>
                    <button class="category">Houses</button>
                    <button class="category">Cars</button>
                    <button class="category">Drinks</button>
                    <button class="category">Food</button>
                    <button class="category">Companies</button>
                    <button class="category">Art</button>
                    <button class="category">Clothing</button>
                    <button class="category">Technology</button>
                    <button class="category">Electronics</button>
                    <button class="category">Jewelry</button>
                    <button class="category">Collectibles</button>
                </div>
                <button class="close-popup" id="close-popup">Close</button>
            </div>
        </div>
    </main>
    <div class="gameStarted">
            <h2 id="question-text" class="question-text">Whats Worth More?:</h2>
            <div class="the-images">
                <img id="item1" class="item" src="https://lh3.googleusercontent.com/pw/ADCreHcCjus21gcwf_7ZWtWnI1C8VF6il_oIJ5L0yCIuR-I5YOr_ZGzZLL14BeTxWL4TfNr1nwJqkdsQiIUjeTOrj9RNKSN-05eq91gQP4fWrPSKlqOeXcXdkZtKd1F0UlLruAfupEnybDoKx7BnduYLYM32LEZPy_qJqJoABqE4lhytYWFyo-uMbZ8GlV3IjTl4fWwRNT1hKMiQoX2J0marXDA5CrtrRq9nJQE0nH2rtSCSwZmJnCQc0PrEmeA_Rg5Ss6gDzvpwWr7dQmH0IfUCXxZiJl1HFNYGCoSr2Rm79hKdVJPlLWeaevPgwDJ7Yy9igO6IdMc77QNax3jA93bMYqkChm2wa40ev8HPs7h2Q_nteXUFq_b1r2I7ap866gONYBdE0qeZcd0uSudyzTgIyz9VTsiDKxIItR7aljYE_BfL2QZHKYWmqSvuxLx0FM85qczVPcH1BI-T3goi5EvvUOcKeTUJt3sUdZsr_LQoMPlYEa2bvQcTGlypCMI7hcTYOLwNPsKV1RFCJu4MxlcnLEO6S8S9dB6CkSPZQhijU_gxXehMkj64EdCVcOlzIda1r5HegE7KaHEEoxAv8XbhM0qpnjeQrMs1an8jNqAR6IL3LW-tcQlsGljFCf_XNp0adrHsLSlvablMdiRokWnYlU3dton4yw5-3KXPdr8G-EVSrTLf1C8HAZvRx0eoSTHEJD-hxjRbieVyzhHeSjBJ6mZGIHbfnwuhudLyxYlEPZkqWRAUin-oh_iQcNXSs_wLko-XCoDt0gllXM27oa5tdvfJk4PiUKBO-fa25MCxF0G4P8aKOh_WKPkIddRswVhUh3aTPNI6O9JbDJpgeA6n-pGx8vf1lS_e79wxFjcFJAoPtvxl423aB4Oe-xCZbZlVrVMJZPQAkOhFtOQOcNSZ1yq5XH9H6bz2G9q-g_I2BkCb1KwKJ5cftOR7vg=w707-h353-s-no?authuser=0" alt="Item 1">
                <img id="item2" class="item" src="https://lh3.googleusercontent.com/pw/ADCreHdP1_Kf_n02AGb882NS26oo4NnFmqUylj7ww8ecIoHje6Zl4z_uQ8_z8KpfF126leO4l_TImfWiy0dTE0CYApw_dekxeH6XedeRv3iMrrBfCm0Ds2BhakRUXStwNm8_YyNN4fcl3NnlLpN1jMls1ixO0-WG0hmshnuFgygug-qvuMyd8hpQW1HKwslTr-zPBn2M6t_odmoQUQAWQseNysVvrCo7me-9lnfmumG17oFie0S6Pj7mEE_q4BwiYk4fQ8iYxfiuDyGdbLlR6VmRdvkf7BlbZqA417AAdzyWohLSZoU2aY_K0EP0b-7oZF76AQYc6kQE-nd2QU9nhBT9Ij6SLNLdavFUQck4uqZzVSgUXPo81hGPpeywq_FF3ll37TlEMWnQSgSEm80xgmGP7KkWK-OIVpF_-CHrCqB-18d5LnRcut48HXjqPeJRXzxRntB0HVCFvq0nZWbI2OiMF3ILJWp09gyQWr3zLsM5CfDm3NWmVLy4LUg3BNNfJ9BdBNH0TdyFzEH6vxlQkaEtVY86K9eMJVc9tqt1T6LeBXxh55YtK0XVO7Kq7Wk0JUAh6J_OqqSMtZNBYEDPOge0FXLuGLXXlZ-hDxYQjlOA4-J6ALAEY6qlcKdQu_iG6sDToC0nBlbAUmq0JYk194q8ojYxfHps-HoYCZxFeauawiC2mY49omlR_YEslegwi79DMOttecI56CdqWK6Syd_mOsd57lM9eJJ4_r2U3BUC1YHfL8bEVIAqqYQJCwkMP1wa8UYbc3gjDpmQBNNZ_dMvT2rnlYBH-S46BCeYnJH_WHPzK0NXLY5p7Qtk41o2EFoyX0843UySheVz_oRAWzQdY0-nt4DNIPOeNo7WSBqtRF9e00UevzidggdRcgZgLU4xacjkkpy6k7YhY9xsFlwUfuXvm6uuBVSAtJN3m9Gg630Jn6QgX1lb7LOn7A=w654-h381-s-no?authuser=0" alt="Item 2">
                
             </div>
             <div class="imgtxt">
                <p class="item-text">Lambo 123</p>
                <p class="item-text">Lambo 1234</p>
             </div>
             <div class="line"><p class="vs">VS</p></div>
        <div id="score-container" class="score-container">
            <p id="score-text" class="score-text">Score: 0</p>
        </div>
    </div>

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

*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: Ink Free;
}
/*SET THE NAVIGATION BAR AT THE TOP OF THE SCREEN, REMOVE BACKGROUND COLOR AND BOX SHADOW LATER ON*/
.navbar{
    
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
 

  
}
/*SETTING THE LOGO COLOR AND ANIMATION*/
h1{
    color: white;
    font-size: 2rem;
    margin-left: 2rem;
   
}
h1>a:hover{
    margin-left: 2rem;
    transition: 0.5s ease-out;
  
}
/*SETTING THE NAVBAR*/
li>a{
    text-decoration: none;
    color: white;
    font-size: 1.4rem;
    margin-left: 0.6rem;
    margin-right: 3rem;
}
li>a:hover{
    color:bisque;
    opacity: 0.8;
    transition: 0.25s ease-out;
}
h1>a{
    text-decoration: none;
    color: white;
}
ul{
    list-style-type: none;
}

/*BACKGROUND IMAGE SET TO FIT, CHANGE THE WIDTH AND HEIGHT VH IF NEEDED, OPACITY TO 1 OR REMOVE*/
body{
    background-image: url('https://wallpapercave.com/wp/BW3DgZD.jpg');
  background-size: cover; 
    width: 100vh;
    height: 100vh;
    opacity: 0.96;
}
/*THE MAIN TEXT AT THE MIDDLE OF THE SCREEN*/
.wwm{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.title{
    font-size: 5rem;
}
/*PLAY BUTTON NEEDS JAVASCRIPT*/
.play{
    margin-top: 1rem;
font-size: 3rem;
padding: 0rem 3rem;
background-color: rgb(122, 64, 72);
color: white;
}
.play:hover{
    opacity: 0.8;
    transition: .20s ease-in-out;
}


/*chatgpt*/
.popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.popup-content {
    background: white;
    width: 60%;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.category {
    margin: 5px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5rem
}

.close-popup {
    margin-top: 20px;
    background-color: #DC3545;
    font-size: 1.5rem;
}



.gameStarted {
    display: none;
}

.gameStarted.acive{
    display: flex;
    padding: 30rem;
}


.divv{
    flex-direction: row;
    border: 2px solid red;
}

.the-images {
    display: flex;
}

.body.active{
    background-image: url('https://images.hdqwalls.com/download/black-gradient-b9-1920x1080.jpg');
    transition: 1s ease;
}
/* Style the game container */
.gameStarted {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}



/* Style the item images */
.item {
display: flex;
grid-template-columns: 2 1 repeat();

justify-content: center;

}


.gameStarted{
    display: none;
}

#item1{
position: absolute;
display: flex;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
}
#item2{
    position: absolute;
display: flex;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
}
.line{
    position: absolute;
display: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 0.01rem solid grey;
height: 100vh;
background-color: grey;
opacity: 0.9;
}
.vs{
    display: flex;
    align-items: center;
    font-size: 3rem;
    border-radius: 50%;
}

.imgtxt
{
    position: absolute;
    color: white;
    font-size: 3rem;

    display:  flex;
    justify-content: space-around;
    top: 69%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160rem;
}*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: Ink Free;
}
/*SET THE NAVIGATION BAR AT THE TOP OF THE SCREEN, REMOVE BACKGROUND COLOR AND BOX SHADOW LATER ON*/
.navbar{
    
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
 

  
}
/*SETTING THE LOGO COLOR AND ANIMATION*/
h1{
    color: white;
    font-size: 2rem;
    margin-left: 2rem;
   
}
h1>a:hover{
    margin-left: 2rem;
    transition: 0.5s ease-out;
  
}
/*SETTING THE NAVBAR*/
li>a{
    text-decoration: none;
    color: white;
    font-size: 1.4rem;
    margin-left: 0.6rem;
    margin-right: 3rem;
}
li>a:hover{
    color:bisque;
    opacity: 0.8;
    transition: 0.25s ease-out;
}
h1>a{
    text-decoration: none;
    color: white;
}
ul{
    list-style-type: none;
}

/*BACKGROUND IMAGE SET TO FIT, CHANGE THE WIDTH AND HEIGHT VH IF NEEDED, OPACITY TO 1 OR REMOVE*/
body{
    background-image: url('https://wallpapercave.com/wp/BW3DgZD.jpg');
  background-size: cover; 
    width: 100vh;
    height: 100vh;
    opacity: 0.96;
}
/*THE MAIN TEXT AT THE MIDDLE OF THE SCREEN*/
.wwm{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.title{
    font-size: 5rem;
}
/*PLAY BUTTON NEEDS JAVASCRIPT*/
.play{
    margin-top: 1rem;
font-size: 3rem;
padding: 0rem 3rem;
background-color: rgb(122, 64, 72);
color: white;
}
.play:hover{
    opacity: 0.8;
    transition: .20s ease-in-out;
}


/*chatgpt*/
.popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.popup-content {
    background: white;
    width: 60%;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.category {
    margin: 5px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5rem
}

.close-popup {
    margin-top: 20px;
    background-color: #DC3545;
    font-size: 1.5rem;
}



.gameStarted {
    display: none;
}

.gameStarted.acive{
    display: flex;
    padding: 30rem;
}


.divv{
    flex-direction: row;
    border: 2px solid red;
}

.the-images {
    display: flex;
}

.body.active{
    background-image: url('https://images.hdqwalls.com/download/black-gradient-b9-1920x1080.jpg');
    transition: 1s ease;
}
/* Style the game container */
.gameStarted {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}



/* Style the item images */
.item {
display: flex;
grid-template-columns: 2 1 repeat();

justify-content: center;

}


.gameStarted{
    display: none;
}

#item1{
position: absolute;
display: flex;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
}
#item2{
    position: absolute;
display: flex;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
}
.line{
    position: absolute;
display: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 0.01rem solid grey;
height: 100vh;
background-color: grey;
opacity: 0.9;
}
.vs{
    display: flex;
    align-items: center;
    font-size: 3rem;
    border-radius: 50%;
}

.imgtxt
{
    position: absolute;
    color: white;
    font-size: 3rem;

    display:  flex;
    justify-content: space-around;
    top: 69%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160rem;
}

document.addEventListener("DOMContentLoaded", function() {
    const playButton = document.querySelector(".play");
    const popup = document.getElementById("popup");
    const closePopupButton = document.getElementById("close-popup");
    const categoryButtons = document.querySelectorAll(".category");
    const gameStarted = document.querySelector(".gameStarted");
    const mainPage = document.getElementById("main-page");
    const main = document.querySelector("main");
    const body = document.querySelector(".body");

    playButton.addEventListener("click", function() {
        popup.style.display = "block";
    });

    closePopupButton.addEventListener("click", function() {
        popup.style.display = "none";
    });

    // Add click event listeners to all category buttons
    categoryButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            // Close the popup
            popup.style.display = "none";

            // Hide the entire page
            mainPage.style.display = "none";

            // Start the game
            gameStarted.style.display = "block";

            main.style.display = "none";

           gameStarted.classList.add('active');
           body.classList.add('active');
           
        
         

        });
    });
});

robheyays · September 28, 2023, 5:59pm

Hello, You have omitted !DOCTYPE html your browser will go into quirk mode without this. Just a suggestion, good luck.

Maripo31 · September 28, 2023, 7:45pm

i forgot to paste it, sorry

system · March 29, 2024, 7:46am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Hello Guys can anybody help me solve this problem JavaScript	47	1805	June 1, 2021
Need help in JavaScript Quiz as it cant run	5	586	June 1, 2021
Help with Personal Project JavaScript	13	1231	February 2, 2021
Build a Quiz Game Code Feedback	5	47	July 26, 2025
Guess the Price or Pay the Difference - a Simple Game Made with Vanilla JavaScript Code Feedback	1	394	June 1, 2021

HTML/CSS/JAVA Can't figure out how to make questions and answers

Related topics