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

Ingrid Bardales
Ingrid Bardales
10,616 Points
Posted by Ingrid Bardales
Ingrid Bardales
10,616 Points

Validating inputs with javascript in html

Hi guys I'm building a site for my church and I would like to add a page where there are a series of quiz questions and visitors can answer them. if they answer correctly they get a friendly message saying "alright high five!" or "Great job!" if they get it wrong they get a message saying "ok, try again" or something like that. Below is my code, I've inserted javascript in my html and it doesn't work (argh). I want to add at least 50 - 100 questions geared for all levels, for children, teens and adults. Was wondering if you guys can help me.....thanx in advance for all your help!

<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>St.AnthonyofPadua</title>
   </head>
   <body>
    <div id="main-wrapper">
        <div id="main-header">
            <h1>Saint Anthony of Padua Parish</h1>
        </div>
        <ul id="main-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="Catechumens.html">Catechumens</a></li>
                <li><a href="vid.html">Audio and Video</a></li>
                <li><a href="Prayers and Devotionals.html">Prayers and Devotionals</a></li>
                <li><a href="Books.html">Books</a></li>
                <li><a href="Resources.html">Resources</a></li>
        </ul>
                <h2>Let's check to see how bible savy you are! Ready? Let's go!</h2>


<script>document.write("What is the first book in the  Old Testament?")</script><input type="text" id="answer" name="first"> 
<script>
 function (checkanswer) {
    if (input[type="genesis"]){
    alert("Great job!");
} else (alert ("Don't worry try again."));}
</script>

</div>
</body>
</html>
Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

<script>document.write("What is the first book in the Old Testament?")</script><input type="text" id="answer" name="first"> <script> function (checkanswer) { if (input[type="genesis"]){ alert("Great job!"); } else (alert ("Don't worry try again."));} </script>

6 Answers

Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points
Stephen Printup
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Hey Ingrid-

Do you have GIT installed? I am using workspaces now, but it may be easier to collaborate over GIT if you have it installed. I have to go to work right now, but here is what I have done:

<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>St.AnthonyofPadua</title>
     <link rel=
   </head>
   <body>
    <div id="main-wrapper">
        <div id="main-header">
            <h1>Saint Anthony of Padua Parish</h1>
        </div>
        <ul id="main-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="Catechumens.html">Catechumens</a></li>
                <li><a href="vid.html">Audio and Video</a></li>
                <li><a href="Prayers and Devotionals.html">Prayers and Devotionals</a></li>
                <li><a href="Books.html">Books</a></li>
                <li><a href="Resources.html">Resources</a></li>
        </ul>
                <h2>Let's check to see how bible savy you are! Ready? Let's go!</h2>


     <div id="quiz">
     <h3 id="question">What is the first book in the  Old Testament?</h3>
       <input type="text" id="answer" name="first">
     </div>

     <script type="text/javascript" src="js/app.js"></script>
     </div>
</body>
</html>

I separated the quiz into a java script file so we can make an array for your quiz questions. Here is the js file with a current summary of what you are looking to do. 

//Problem: I would like to add a page where there are a series of quiz questions 
//Solution: 

//Problem: If they answer correctly they get a friendly message saying "alright high five!" or "Great job!" if they get it wrong they get a message saying "ok, try again" or something like that. 
//Solution: Create and if/then pop up alert that displays the affirmative text. 
    function (checkanswer) {
        if (input[type="genesis"]){
        alert("Great job!");
    } else (alert ("Don't worry try again."));}

//Problem: I want to add at least 50 - 100 questions
//Solution: Create an Array with questions and their respective answers to be placed in the quiz question heading.

-Stephen

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

Hi Stephen thanks so much for your help!! I understand, I'm at work also, I don't have a Github account but I will register tonight after work. Once again, thanx!!! Ingrid

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

Hi Stephen, good news..I already had Github installed...I forgot i installed it during the summer. Looking forward to hearing from you. Ingrid

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

Hi Stephen, I hope you had a great time over the weekend! Wow Stephen, I'm really excited that you're excited about this also...all i wanted initially was some help for my little quiz and now I get a collaborator...excellent!! My github username is russygrl. I look forward to hearing from you again! BTW my email is olmccb@hotmail.com!

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

Hi Stephen, below is a link to my folder in Dropbox, I'm thrilled about sharing with you what I've done so far, I know I've got some tweaking to do,,,therefore I would love your insight as to what you think could be improved. I know I have issues with the main header..height is too tall, even though I've used background position value of cover; and I'm also having an issue with horizontally centering my nav. You will not be able to view the videos because they were taking entirely too long to download. I'm entirely new to github it's a whole new world for me.....now I remember why i never used my account, but since we will be working together I'm going to be experiencing some on the job training!

Thanks a million, Ingrid

https://www.dropbox.com/sh/s36al35tjswrrhn/AACvoxToh7kwtBZtkgLN3QsWa?dl=0

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

Hi Stephen, hope all well..Guess what?! I found what i was looking for, a fill in the blanks quiz. I downloaded Mike Meyers book A Smarter Way to Learn Javascript and in his website he actually has a fill in the blank quiz.
I inspected the element but i couldn't make out the code, well at least the javascript part of it. Here's the link to it.

http://www.asmarterwaytolearn.com/js/1.html

Ingrid

Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points
Stephen Printup
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Awesome! I'm glad you found your answer. Let me know if there is anything else you would like help on.

Respectfully, Stephen

Ingrid Bardales
Ingrid Bardales
10,616 Points
Ingrid Bardales
Ingrid Bardales
10,616 Points

Hey Stephen, well I found what i needed but couldn't figure out the javascript/jquery..maybe you can help?