Welcome to the Java Programming Forums


The professional, friendly Java community. 21,500 members and growing!


The Java Programming Forums are a community of Java programmers from all around the World. Our members have a wide range of skills and they all have one thing in common: A passion to learn and code Java. We invite beginner Java programmers right through to Java professionals to post here and share your knowledge. Become a part of the community, help others, expand your knowledge of Java and enjoy talking with like minded people. Registration is quick and best of all free. We look forward to meeting you.


>> REGISTER NOW TO START POSTING


Members have full access to the forums. Advertisements are removed for registered users.

Results 1 to 6 of 6

Thread: [Solved] Quiz app modification

  1. #1
    Junior Member
    Join Date
    Feb 2021
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question [Solved] Quiz app modification

    Hello

    I'm trying to make a small modification for quiz app which is created by briancodex.
    Right now when we select any quiz answer it changes color to green(correct) or red(incorrect) waits 1sec and displays next question.
    What I'm trying to modify is when we answer the question incorrect that answer should be marked red(like now it's) and the right answer should be marked green and blinking also until correct answer is not clicked quiz is paused.
    Probably this is not so hard to do, but I'm totally new to Java and have no idea where to begin.

    For now I have modified from:

    game.js
    choices.forEach(choice => {
        choice.addEventListener('click', e => {
            if(!acceptingAnswers) return
     
            acceptingAnswers = false
            const selectedChoice = e.target
            const selectedAnswer = selectedChoice.dataset['number']
     
            let classToApply = selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'
     
            if(classToApply === 'correct') {
                incrementScore(SCORE_POINTS)
            }
     
            selectedChoice.parentElement.classList.add(classToApply)
     
            setTimeout(() => {
                selectedChoice.parentElement.classList.remove(classToApply)
                getNewQuestion()
     
            }, 1000)
        })
    })

    To(alert)

    choices.forEach(choice => {
        choice.addEventListener('click', e => {
            if(!acceptingAnswers) return
     
            acceptingAnswers = false
            const selectedChoice = e.target
            const selectedAnswer = selectedChoice.dataset['number']
     
            let classToApply = selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'
     
            if(classToApply === 'correct') {
                incrementScore(SCORE_POINTS)
            }
     
            selectedChoice.parentElement.classList.add(classToApply)
     
            setTimeout(() => {
                selectedChoice.parentElement.classList.remove(classToApply)
     
                if(classToApply == 'incorrect' & currentQuestion.answer == 1) {
                    alert('The correct answer is A');
                }
     
                if(classToApply == 'incorrect' & currentQuestion.answer == 2) {
                    alert('The correct answer is B');
                }
     
                if(classToApply == 'incorrect' & currentQuestion.answer == 3) {
                    alert('The correct answer is C');
                }
     
                if(classToApply == 'incorrect' & currentQuestion.answer == 4) {
                    alert('The correct answer is D');
                }
     
                getNewQuestion()
     
            }, 1000)
        })
    })

    Source: -https://github.com/briancodex/quiz-app-js
    Last edited by Brenthos; February 20th, 2021 at 07:31 PM.

  2. #2
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    23,616
    Thanks
    53
    Thanked 2,529 Times in 2,480 Posts

    Default Re: Quiz app modification

    What language is this written in? It does not look like a Java program.
    If you don't understand my answer, don't ignore it, ask a question.

  3. #3
    Junior Member
    Join Date
    Feb 2021
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Quiz app modification

    Quote Originally Posted by Norm View Post
    What language is this written in? It does not look like a Java program.
    Hi Norm,

    This quiz is written using HTML, CSS and Javascript.
    -https://youtu.be/f4fB9Xg2JEY?t=9

  4. #4
    Super Moderator Norm's Avatar
    Join Date
    May 2010
    Location
    Eastern Florida
    Posts
    23,616
    Thanks
    53
    Thanked 2,529 Times in 2,480 Posts

    Default Re: Quiz app modification

    That's what it looked like. This forum is for Java
    If you don't understand my answer, don't ignore it, ask a question.

  5. #5
    Junior Member
    Join Date
    Feb 2021
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Quiz app modification

    Quote Originally Posted by Norm View Post
    That's what it looked like. This forum is for Java
    Oh.. how embarrassing.
    My apologies.

  6. #6
    Junior Member
    Join Date
    Feb 2021
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Re: Quiz app modification

    Anyway if someone needs it I got it working the way as I described in my first post.

    game.css
    body {
        color: #fff;
    }
     
    .choice-container {
        display: flex;
        margin-bottom: 0.8rem;
        width: 100%;
        border-radius: 4px;
        background: rgb(18, 93, 255);
        font-size: 3rem;
        min-width: 80rem;
    }
     
    /* begin correct answer green flashing */
     
    .choice-container.correct-flashing {
        animation: green-flashing-ani 1s infinite;
    }
     
    @keyframes green-flashing-ani {
        0% {
            background: linear-gradient(32deg, rgba(11, 223, 36) 0%, rgb(41, 232, 111) 100%);
        }
        49.9% {
            background: linear-gradient(32deg, rgba(11, 223, 36) 0%, rgb(41, 232, 111) 100%);
        }
        50% {
            background: transparent;
        }
        100% {
            background: transparent;
        }
    }
     
    /* end correct answer green flashing */
     
    .choice-container:hover {
        cursor: pointer;
        box-shadow: 0 0.4rem 1.4rem 0 rgba(6, 103, 247, 0.5);
        transform: scale(1.02);
        transform: transform 100ms;
    }
     
    .choice-prefix {
        padding: 2rem 2.5rem;
        color: white;
    }
     
    .choice-text {
        padding: 2rem;
        width: 100%;
    }
     
    .correct {
        background: linear-gradient(32deg, rgba(11, 223, 36) 0%, rgb(41, 232, 111) 100%);
    }
     
    .incorrect {
        background: linear-gradient(32deg, rgba(230, 29, 29, 1) 0%, rgb(224, 11, 11, 1) 100%);
    }
     
    /* Heads up Display */
     
    #hud {
        display: flex;
        justify-content: space-between;
    }
     
    .hud-prefix {
        text-align: center;
        font-size: 2rem;
    }
     
    .hud-main-text {
        text-align: center;
    }
     
    #progressBar {
        width: 20rem;
        height: 3rem;
        border: 0.2rem solid rgb(11, 223, 36);
        margin-top: 2rem;
        border-radius: 50px;
        overflow: hidden;
    }
     
    #progressBarFull {
        height: 100%;
        background: rgb(11, 223, 36);
        width: 0%;
    }
     
    @media screen and (max-width: 768px) {
        .choice-container {
            min-width: 40rem;
        }
    }

    game.js
    const question = document.querySelector('#question');
    const choices = Array.from(document.querySelectorAll('.choice-text'));
    const progressText = document.querySelector('#progressText');
    const scoreText = document.querySelector('#score');
    const progressBarFull = document.querySelector('#progressBarFull');
    const choiceContainers = Array.from(document.querySelectorAll('.choice-container'));
     
    let currentQuestion = {}
    let acceptingAnswers = true
    let score = 0
    let questionCounter = 0
    let availableQuestions = []
     
    let questions = [
        {
            question: 'What is 2 + 2?',
            choice1: '2',
            choice2: '4',
            choice3: '21',
            choice4: '17',
            answer: 2,
        },
        {
            question:
                "The tallest building in the world is located in which city?",
            choice1: "Dubai",
            choice2: "New York",
            choice3: "Shanghai",
            choice4: "None of the above",
            answer: 1,
        },
        {
            question: "What percent of American adults believe that chocolate milk comes from brown cows?",
            choice1: "20%",
            choice2: "18%",
            choice3: "7%",
            choice4: "33%",
            answer: 3,
        },
        {
            question: "Approximately what percent of U.S. power outages are caused by squirrels?",
            choice1: "10-20%",
            choice2: "5-10%",
            choice3: "15-20%",
            choice4: "30%-40%",
            answer: 1,
        }
    ]
     
    const SCORE_POINTS = 100
    const MAX_QUESTIONS = 4
     
    startGame = () => {
        questionCounter = 0
        score = 0
        availableQuestions = [...questions]
        getNewQuestion()
    }
     
    getNewQuestion = () => {
        if(availableQuestions.length === 0 || questionCounter > MAX_QUESTIONS) {
            localStorage.setItem('mostRecentScore', score)
     
            return window.location.assign('/end.html')
        }
     
        questionCounter++
        progressText.innerText = `Question ${questionCounter} of ${MAX_QUESTIONS}`
        progressBarFull.style.width = `${(questionCounter/MAX_QUESTIONS) * 100}%`
     
        const questionsIndex = Math.floor(Math.random() * availableQuestions.length)
        currentQuestion = availableQuestions[questionsIndex]
        question.innerText = currentQuestion.question
     
        choices.forEach(choice => {
            const number = choice.dataset['number']
            choice.innerText = currentQuestion['choice' + number]
        })
     
        availableQuestions.splice(questionsIndex, 1)
     
        acceptingAnswers = true
    }
     
    choices.forEach(choice => {
        choice.addEventListener('click', e => {
            if (!acceptingAnswers) return
     
            // get container of correct answer
            const correctContainer = choiceContainers[currentQuestion.answer - 1];
     
            acceptingAnswers = false
            const selectedChoice = e.target
            const selectedAnswer = selectedChoice.dataset['number']
     
            // set class to apply according answer correct or not
            let classToApply = selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'
     
            // correct answer?
            if (classToApply === 'correct') {
                // answer correct
                // increment score only if there was no wrong answer
                if (!correctContainer.classList.contains('correct-flashing')) {
                    incrementScore(SCORE_POINTS)
                }
                // after 1 sec:
                setTimeout(() => {
                    // remove all classes previously set
                    choiceContainers.forEach(item => {
                        item.classList.remove('correct')
                        item.classList.remove('correct-flashing')
                        item.classList.remove('incorrect')
                    })
                    getNewQuestion()
                }, 1000)
     
            } else {
                // answer incorrect
                // make container of correct answer flash
                correctContainer.classList.add('correct-flashing')
                // accept answer again
                acceptingAnswers = true
            }
     
            selectedChoice.parentElement.classList.add(classToApply)
        })
    })
     
    incrementScore = num => {
        score +=num
        scoreText.innerText = score
    }
     
    startGame()

Similar Threads

  1. Avoiding concurrent modification exception?
    By Twon23 in forum Collections and Generics
    Replies: 4
    Last Post: November 12th, 2012, 11:34 AM
  2. Replies: 3
    Last Post: February 9th, 2012, 01:04 PM
  3. MODIFICATION OF AN APPLICATION
    By VeliDemir in forum Java ME (Mobile Edition)
    Replies: 1
    Last Post: February 8th, 2012, 12:52 PM
  4. unable to get values for modification
    By javaking in forum JavaServer Pages: JSP & JSTL
    Replies: 2
    Last Post: September 17th, 2010, 05:27 AM
  5. [SOLVED] Modification of current program to activate notification pop up
    By Sterzerkmode in forum AWT / Java Swing
    Replies: 1
    Last Post: May 28th, 2009, 04:54 AM