Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Balladares
John Balladares
Courses Plus Student 9,828 Points

Any idea how I can go about interpreting user input with JavaScript using input fields instead of "prompt".

I am trying to make a simple quiz game, but cannot figure out how to use the players input to prompt whether or not they are correct. I know I can use "alert" or "prompt" but popups make for a less than optimal user experience.

I was inspired by this codechallenge: http://teamtreehouse.com/library/javascript-basics-2/making-decisions-with-conditional-statements/the-conditional-challenge-solution

Any advice would be greatly appreciated!

i've posted a link below the my most recent attempt.

Thanks again.

http://codepen.io/jaballadares/pen/PwjZYR

Hugo Paz
Hugo Paz
15,622 Points

Hi John,

Does it need to be javascript or can you use jQuery?

John Balladares
John Balladares
Courses Plus Student 9,828 Points

Hi Hugo Paz ,

Thank you for reaching out! I can definitely use jQuery, I was looking at jQuery docs right now, but no luck.

2 Answers

Hugo Paz
Hugo Paz
15,622 Points

Hey John,

Have a look at this:

<html>
<head>
    <title>Quiz</title>
    <style>
    html{
        width:100%;
        height:100%;

    }

    body{
        width: 100%;
        height: 100%;

    }

    .container{
        width:70%;
        min-height:50%;
        margin: 0 auto;
        background-color: teal;
    }

    h1{
        text-align: center;
        color:white;
    }

    h2{
        text-align: center;
        color: whitesmoke;
    }

    input[type='text']{
        width:80%;
        height:10%;
        display: block;
        margin: 0 auto;
        font-size: 2em;
    }

    button{
        display: block;
        width:20%;
        margin: 20px auto;
        height:10%;
        font-size: 2em;
    }
    .response{

        width:50%;
        padding: 20px;
        display: none;
        margin: 0 auto;
    }

    .correct{

        background-color: green;
    }

    .wrong{
        background-color: tomato;
    }

    </style>
</head>


<body>
<div class="container">
    <h1>The Ultimate Quiz</h1>
    <div class="quizBox">
        <h2>What is Jack's favourite animal?</h2>

            <input type='text' id='answer' placeholder='hint: It can jump 150 times its size'>
            <button id='submit'>Guess</button>


    </div>
</div>
<script src='https://code.jquery.com/jquery-2.1.3.js'></script>
<script>

    var response = $('<div class="response"></div>');
    $('body').append(response);

    $('#submit').click(function(){


        var answer = $('#answer').val();

        if(answer.toLowerCase() == 'flea')
        {
            $(response).addClass('correct').append('<h1>You are right</h1>').slideDown().fadeOut(5000, function(){
                $(this).removeClass('correct').empty();
            });
        }else {
            $(response).addClass('wrong').append('<h1>Oops. Try again.</h1>').slideDown().fadeOut(5000, function(){
                $(this).removeClass('wrong').empty();
            });
        }

    });
</script>
</body>
</hmtl>
John Balladares
PLUS
John Balladares
Courses Plus Student 9,828 Points
John Balladares
John Balladares
Courses Plus Student 9,828 Points

Hugo Paz , this is beautiful - thank you! I didn't even think about doing so much DOM manipulation.

In the JavaScript course, document.write(); would insert whatever was passed in directly to the index.html page. However, when I tried that locally it would open up a completely new page.

Thank you again!