Problem With My Script

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »

50 Replies - 2791 Views - Last Post: 26 June 2015 - 03:40 PM

#1 Tyr4el  Icon User is offline

  • D.I.C Addict

Reputation: 23
  • View blog
  • Posts: 507
  • Joined: 24-October 14

Problem With My Script

Posted 26 June 2015 - 04:14 AM

I'm working on a game for practice, but I may have bit off more than I can chew and I'm stuck now. I'd like to finish it though. It's a good challenge and even if I get help, I still consider it a good learning experience.

It's just a simple quiz written in Javascript (and outputted to HTML). The way I have it right now, my answers are outputting the correct variables from the array object but it's spitting them all out for each choice. I know why it's doing it, but I can't think of a way to fix it while keeping the code clean and without repeating myself. The problem is line 86 where I'm printing to the HTML an array of answer and wrongAnswers (which is also an array). So it makes sense why I'm getting the output I am. Can anyone point me in the right direction or give me a little pointer?

Here's the code in a pen - http://codepen.io/ni...klin/pen/XbzNZq

This post has been edited by Tyr4el: 26 June 2015 - 04:16 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Problem With My Script

#2 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 185
  • View blog
  • Posts: 1,167
  • Joined: 21-November 13

Re: Problem With My Script

Posted 26 June 2015 - 08:20 AM

First of all, I would put all the options, right or wrong, in a same array and store the index of the right answer in the answer property. This way it's easier to shuffle and distribute the options and it simply makes more sense in my opinion.

Then I would do a simple for loop instead of doing 4 function calls : writing down the options is just one operation. I can't think of a situation when you would want to write only one of the options in the #letter element. Moreover, it allows for a dynamic number of options.

In you for loop, you can either use the increment of the loop to pick an option in your array for each choice - it solves your problem : only one option is written - but you may also want to shuffle the options first. In this case you will need to do the same thing you're doing with the questions (picking a random option and removing it from an array).

A note about the removing from an array logic : in your code you set the property asked to true and the next line you test if asked is true before you remove the question from the array. It doesn't make sense. This property is useless, you can throw it away. And I would personally not remove the question from the array : I would create another array storing the indices of the questions that are left to ask and I would pick and remove a random index from this array instead of acting on the real questions array. The point is to separate your logic and your data.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6541
  • View blog
  • Posts: 26,468
  • Joined: 12-December 12

Re: Problem With My Script

Posted 26 June 2015 - 09:40 AM

@JMRKER Please do not post a full coded solution, this is against the accepted practice of this site.

(When posting a full HTML page please also include a DOCTYPE declaration. We need to encourage this practice, and requirement.)

This post has been edited by andrewsw: 26 June 2015 - 09:44 AM

Was This Post Helpful? 1
  • +
  • -

#4 Tyr4el  Icon User is offline

  • D.I.C Addict

Reputation: 23
  • View blog
  • Posts: 507
  • Joined: 24-October 14

Re: Problem With My Script

Posted 26 June 2015 - 09:49 AM

Codepen doesn't require a DOCTYPE. I know it's required for HTML but Codepen yells at you if you have it. So I remove it for that preview.

How do you store the answer in the property like you mentioned?

var questions = [{
    text: "What tree did George Washington cut down and then lie about?",
    rightAnswer: answers[0],
    answers: ["Cherry","Dogwood", "Pear", "Apple"],
    asked: false
}, {


Like that?

This post has been edited by Tyr4el: 26 June 2015 - 09:54 AM

Was This Post Helpful? 0
  • +
  • -

#5 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Problem With My Script

Posted 26 June 2015 - 09:58 AM

View Postandrewsw, on 26 June 2015 - 10:40 AM, said:

@JMRKER Please do not post a full coded solution, this is against the accepted practice of this site.

(When posting a full HTML page please also include a DOCTYPE declaration. We need to encourage this practice, and requirement.)



Sorry, I guess I don't understand the purpose of the forum if not for educational purposes.
Sort of defeats the purpose of users asking for help if submissions are just deleted.

As I had indicated in the deleted code, I would not have coded that way but tried to at least
give a working script from which to continue discussions using the OP's posted code (as was)
and to allow other users to comment on alternative methods/solutions.
Was This Post Helpful? 0
  • +
  • -

#6 Tyr4el  Icon User is offline

  • D.I.C Addict

Reputation: 23
  • View blog
  • Posts: 507
  • Joined: 24-October 14

Re: Problem With My Script

Posted 26 June 2015 - 10:03 AM

You don't have to post a full code JMRKER. You could just post the line(s) of code you would do differently. That will help me more than seeing the full code. As much as I would want to see it right now, because it's driving me insane...it's best not to.

I think the way I have it now is fine. The array has the properties, and I'm close to getting it all to work. I just need to remove all 4 answers from each choice and only display 1.

This post has been edited by Tyr4el: 26 June 2015 - 10:06 AM

Was This Post Helpful? 0
  • +
  • -

#7 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Problem With My Script

Posted 26 June 2015 - 10:20 AM

If you could have seen it, it was just the lines I would have done differently based upon your post.

This post has been edited by andrewsw: 26 June 2015 - 10:44 AM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#8 Tyr4el  Icon User is offline

  • D.I.C Addict

Reputation: 23
  • View blog
  • Posts: 507
  • Joined: 24-October 14

Re: Problem With My Script

Posted 26 June 2015 - 10:23 AM

That's helpful but why don't you explain what you would've done instead? Point me in the right direction; don't give a full block of code. It'll help me learn more, I promise. I'm beating myself up over this because my friend who hasn't studied Javascript...ever, got this to work before me. So I'm really frustrated.
Was This Post Helpful? 1
  • +
  • -

#9 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6541
  • View blog
  • Posts: 26,468
  • Joined: 12-December 12

Re: Problem With My Script

Posted 26 June 2015 - 10:27 AM

@JMRKER What Tyr4el said ;)

There are many ways to help, and encourage, a poster, other than just posting a full coded solution. For example, you could post a few separate lines of code, with commentary, so that the OP would need to understand it, and incorporate it into his/her own code. If he/she didn't understand it fully they could always ask more questions.

This post has been edited by andrewsw: 26 June 2015 - 10:33 AM

Was This Post Helpful? 0
  • +
  • -

#10 Tyr4el  Icon User is offline

  • D.I.C Addict

Reputation: 23
  • View blog
  • Posts: 507
  • Joined: 24-October 14

Re: Problem With My Script

Posted 26 June 2015 - 10:29 AM

@andrewsw - Do you care to weigh in here? I know you're smart, so how could I fix this? I think what geo said is valid, but I think how I'm working it out right now is fine. My brain doesn't think like a programmer yet and this is how I thought it out. All I need to do is stop the choices from repeating. They're only repeating because I'm displaying the full array of possibleAnswers. I need to only display 1 answer per choice.

Where would you tell me to start?
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6541
  • View blog
  • Posts: 26,468
  • Joined: 12-December 12

Re: Problem With My Script

Posted 26 June 2015 - 10:48 AM

Sorry, I'm a little tired just now - my own brain is frazzled.

But please post the code directly here, rather than just as a CODEPEN.

(Please also use a more descriptive heading than just "problem with my script".)

This post has been edited by andrewsw: 26 June 2015 - 10:50 AM

Was This Post Helpful? 0
  • +
  • -

#12 Tyr4el  Icon User is offline

  • D.I.C Addict

Reputation: 23
  • View blog
  • Posts: 507
  • Joined: 24-October 14

Re: Problem With My Script

Posted 26 June 2015 - 10:49 AM

Including the HTML and CSS? Or no? But here's just the JS:

var questions = [{
    text: "What tree did George Washington cut down and then lie about?",
    answer: "Cherry",
    wrongAnswers: ["Dogwood", "Pear", "Apple"],
    asked: false
}, {
    text: "What year did World War II end?",
    answer: "1945",
    wrongAnswers: ["1946", "1942", "1947"],
    asked: false
}, {
    text: "How many stars are on the United States flag?",
    answer: "50",
    wrongAnswers: ["51", "53", "49"],
    asked: false
}, {
    text: "How many states are in the United States?",
    answer: "50",
    wrongAnswers: ["51", "52", "49"],
    asked: false
}, {
    text: "Where was the shot heard around the world fired?",
    answer: "Austria",
    wrongAnswers: ["Germany", "United States", "Paris"],
    asked: false
}, {
    text: "What year was the Civil War?",
    answer: "1861",
    wrongAnswers: ["1869", "1900", "1850"],
    asked: false
}, {
    text: "What year was the atomic bomb dropped on Hiroshima and Nagasaki?",
    answer: "1945",
    wrongAnswers: ["1946", "1943", "1940"],
    asked: false
}, {
    text: "What is the dog's name in the show 'Family Guy'?",
    answer: "Brian",
    wrongAnswers: ["Doug", "Barney", "Stewie"],
    asked: false
}, {
    text: "What is the capital of Maryland?",
    answer: "Annapolis",
    wrongAnswers: ["Washington D.C.", "Portland", "Baltimore"],
    asked: false
}, {
    text: "What year was Woodstock held?",
    answer: "1969",
    wrongAnswers: ["1970", "1965", "1980"],
    asked: false
}, {
    text: "What year was John F. Kennedy assassinated?",
    answer: "1963",
    wrongAnswers: ["1964", "1960", "1962"],
    asked: false
}, {
    text: "What year was Richard Nixon impeached as President of the United States?",
    answer: "None of the above",
    wrongAnswers: ["1970", "1968", "1960"],
    asked: false
}, {
    text: "What was the name of the treaty signed after World War I?",
    answer: "Treaty of Versailles",
    wrongAnswers: ["Treaty of Nuremburg", "Gestalt Treaty", "Treaty of Tears"],
    asked: false
}, {
    text: "Who wrote the series 'Harry Potter'?",
    answer: "J.K. Rowling",
    wrongAnswers: ["J.R.R. Tolkein", "Ernest Hemingway", "Stephen King"],
    asked: false
}, {
    text: "What U.S. state is considered a peninsula?",
    answer: "Florida",
    wrongAnswers: ["Texas", "California", "Maine"],
    asked: false
}, {
    text: "What country is The Vatican located in?",
    answer: "Italy",
    wrongAnswers: ["Germany", "Spain", "Austria"],
    asked: false
}, {
    text: "What is the day 'that will live in infamy'?",
    answer: "December 7, 1941",
    wrongAnswers: ["December 7, 1940", "December 7, 1942", "December 2, 1941"],
    asked: false
}, {
    text: "What is the language of computers called?",
    answer: "Binary",
    wrongAnswers: ["C++", "Javascript", "Machine"],
    asked: false
}, {
    text: "What was the country of origin for the ship 'The Titanic'?",
    answer: "England",
    wrongAnswers: ["Scotland", "Ireland", "Italy"],
    asked: false
}
                 ];

var correct = 0;
var wrong = 0;

var addCorrect = function() {
    document.getElementById("correct").innerHTML = correct + 1;
};

var addWrong = function() {
    document.getElementbyID("wrong").innerHTML = wrong + 1;
};

var random = Math.floor(Math.random() * questions.length);

var addRandomQuestion = function() {
    var randomQuestion = questions[random].text;
    
    document.getElementById("question").innerHTML = randomQuestion;
    questions[random].asked = true; // This says the question has been asked already
    
    if (questions.asked === true) { // Checks whether asked is true and removes the question from the array
        questions[random].splice();
    } else {
        return false;
    }
};


var addRandomAnswer = function(letter) {
    var answer = questions[random].answer;
    var wrongAnswers = questions[random].wrongAnswers;
    var possibleAnswers = [answer, wrongAnswers];
    
    document.getElementById(letter).innerHTML = letter + ": " + possibleAnswers;
};



addRandomQuestion();
addRandomAnswer("A");
addRandomAnswer("B");
addRandomAnswer("C");
addRandomAnswer("D");


Was This Post Helpful? 0
  • +
  • -

#13 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6541
  • View blog
  • Posts: 26,468
  • Joined: 12-December 12

Re: Problem With My Script

Posted 26 June 2015 - 10:54 AM

Yes, the HTML and CSS as well. A CODEPEN link will disappear at some point, making the thread useless in the future for the community.

Well the CSS probably isn't needed, but it isn't large so you might as well post it as well ;)

This post has been edited by andrewsw: 26 June 2015 - 10:55 AM

Was This Post Helpful? 0
  • +
  • -

#14 Tyr4el  Icon User is offline

  • D.I.C Addict

Reputation: 23
  • View blog
  • Posts: 507
  • Joined: 24-October 14

Re: Problem With My Script

Posted 26 June 2015 - 10:55 AM

Nah, it won't disappear. It's in my personal profile :). But alrighty:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Latest compiled and minified Javascript w/ jQuery -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
    <!-- Override Javascript & CSS -->
    <link rel="stylesheet" href="css/main.css" type="text/css">
    
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
    
    <title>Simple Quiz</title>
    
</head>
<body>
    <div class="row">
        <div class="container">
            <div class="col-md-12">
                <h1 class="title"><lead>The Javascript Quiz!</lead></h1>
                
                <hr>
                
                <div id="question"></div>
                
                <br>
    
                <div id="answer">
                    <div id="A"></div>
                    <div id="B"></div>
                    <div id="C"></div>
                    <div id="D"></div>
                </div>
                <br>
                <div class="answers">
                    Number Correct: <span id="correct">0</span><br>
                    Number Wrong: <span id="wrong">0</span> 
                </div>
                <div class="directions">
                    <h3>Directions</h3>
                    <p>Welcome to the Javascript Quiz!  To play the game, simply answer the questions by pressing the corresponding number key on your keyboard.  For example, 1 corresponds to choice "A", 2 corresponds to choice "B", and so on and so forth.  The game will keep track of how many questions you have right and how many questions you have wrong.  At the end of the game, you will be given the option to restart.  Have fun!</p>
                </div>
            </div>
        </div>
    </div>
    
    
    <script src="js/quiz.js"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</body>
</html>


CSS
body {
    background: white;
    font-family: 'Oswald', sans-serif;
}

.title {
    text-align: center;
}

#answer {
    clear: both;
}

hr {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}

hr:after {
    content: "";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

#question {
    font-weight: 700;
}

Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is offline

  • blow up my boots
  • member icon

Reputation: 6541
  • View blog
  • Posts: 26,468
  • Joined: 12-December 12

Re: Problem With My Script

Posted 26 June 2015 - 10:57 AM

It'll still be there in five years?? :)
Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »