SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 83
  1. #51
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you advise how I can place the content of the alert, show below, into a text or label box on my html page i.e. the form, please?

    alert(question.guess + ' is not the right answer.\n\n' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer);

    .............for example, is there a way that I could write

    form.elements.CorrectAnswer.text = question.guess + ' is not the right answer.\n\n' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer

  2. #52
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by faez View Post
    could you advise how I can place the content of the alert, show below, into a text or label box on my html page
    It's not possible to have multiple lines within a text or label box.

    You can though use a div element to contain some content, for example:

    Code html4strict:
    <div class="correctAnswer"></div>

    Code javascript:
    var correctAnswer = form.querySelector('.correctAnswer');
    correctAnswer.innerHTML = '<p>' + question.guess + ' is not the right answer.</p>' +
        '<p>' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer + '</p>';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #53
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANK YOU!

    As a general question, is it also possible to display the content of a variable such as the var 'correctAnswer' outside of a form opening <form> and closing </form> tag, in HTML document?

    for example, can we display the content of a variable in a div tag, that does not belong to a form tag.



    As a second question, I have often seen experienced programmers, like yourself, using the <span> tag. however, I don't fully understand the correct use of the tag. hence, I would greatly appreciate it if you could comment on use of the <span> tag, please.

  4. #54
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by faez View Post
    As a general question, is it also possible to display the content of a variable such as the var 'correctAnswer' outside of a form opening <form> and closing </form> tag, in HTML document?

    for example, can we display the content of a variable in a div tag, that does not belong to a form tag.
    Yes we can, with document.getElementById('identifier')

    Quote Originally Posted by faez View Post
    As a second question, I have often seen experienced programmers, like yourself, using the <span> tag. however, I don't fully understand the correct use of the tag. hence, I would greatly appreciate it if you could comment on use of the <span> tag, please.
    A span tag is an inline version of the div tag, and that's about the only difference between the two. Neither of them have a context that applies to them, as for example occurs with other tags such as the p tag, or the ul tag.

    When it's not suitable to edit the entire contents of an element, as we have been doing with the div tag, that's where you can use a span tag instead to provide an inline section to be edited instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #55
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your detailed and clear explanation.

  6. #56
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    for this game, I would like to allow players to change question numbers at run time. for example, by using a drop down list for players to select or a text box for players to type in their number of questions.

    could you please advise me, how I should approach this code please?

  7. #57
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for this game, I would like to allow players to change question numbers at run time. for example, by using a drop down list for players to select or a text box for players to type in their number of questions.

    could you please advise me, how I should approach this code please?

  8. #58
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by faez View Post
    could you please advise me, how I should approach this code please?
    Do you see in the code how there is a value for the number of questions?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #59
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by faez View Post
    could you please advise me, how I should approach this code please?
    Do you see in the code how there is a value for the number of questions?

    Code:
    this.totalQuestions = 10;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #60
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, using the following code I can changed the number of questions.

    this.totalQuestions = 30;

    but i dont know how to change this at run time - upon player selection/request?

  11. #61
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there a way that i could overwrite the total question number, at run time? for example, replace 10 with 20 questions?

  12. #62
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by faez View Post
    is there a way that i could overwrite the total question number, at run time? for example, replace 10 with 20 questions?
    Do you recall how we did a similar thing with the init function, by passing it a config parameter?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #63
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    yes, I have studied your previous posts and suggested codes, thank you!.

    so far I can ask the player, at run time, to enter their required question number:

    <html>
    <head>

    <script type="text/javascript">

    function prompter()
    {
    var reply = prompt("How many questions would you like to, play?", "");

    alert("You game will now have " + reply + " questions!");



    }

    </script>
    </head>
    <body>

    <div id="QuestionNumber">
    <input type="button" onclick="prompter()" value="Total Questions">
    </div>

    </body>
    </html>

    howevere, I dont know how to make,

    init: function (form)
    {

    this.totalQuestions = var reply;
    }

    else
    alert ("Game number was not changed" + reply + " questions!");

    function reloadPage()
    {
    window.location.reload()
    }
    }


    could you advise please?

  14. #64
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by faez View Post
    could you advise please?
    Sure thing, can I see what you currently have for your page?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #65
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    here is my javascript code,

    window.questions = {
    history: [],

    init: function (form, config) {
    var prop;
    this.minValue = 3;
    this.maxValue = 97;
    this.totalQuestions = 30;
    this.startTime = new Date();
    form.questions = this;
    form.onsubmit = this.ask;



    form.questions.show(form);

    for (prop in config) {
    if (config.hasOwnProperty(prop)) {
    this[prop] = config[prop];

    }
    }
    },



    get: function () {
    var question = {},
    operatorType = Math.floor(Math.random() * 4);
    do {
    question.first = Math.floor(Math.random() * 12) + 1;
    question.second = Math.floor(Math.random() * 12) + 1;
    switch (operatorType) {
    case 0:
    question.operator = 'plus';
    question.answer = question.first + question.second;
    break;
    case 1:
    question.operator = 'minus';
    question.answer = question.first - question.second;
    break;
    case 2:
    question.operator = 'times';
    question.answer = question.first * question.second;
    break;
    case 3:
    question.operator = 'divided by';
    question.answer = (question.first / question.second * 100) / 100;
    break;
    default:
    question.operator = '';
    question.answer = '';
    }
    } while (!this.valid(question));
    return question;
    },
    valid: function (question) {
    var isValid = (question.answer === Math.floor(question.answer)
    && question.answer >= this.minValue
    && question.answer <= this.maxValue);
    if (isValid && question.operator === 'divided by') {
    isValid === (question.first > 1 && question.second > 1);
    }
    return isValid;
    },
    ask: function (evt) {
    var form = this,
    that = form.questions;
    if (!form.elements.answer.value) {
    return false;
    }
    that.answer(form);
    if (that.history.length < that.totalQuestions) {
    that.show(form);
    } else {
    that.endTime = new Date();
    that.summary();
    }
    return false;
    },





    show: function (form) {
    var question = this.get();
    this.history.push(question);
    document.getElementById('questionnumber').innerHTML = this.history.length + ' / ' + this.totalQuestions;
    document.getElementById('first').innerHTML = question.first;
    document.getElementById('operator').innerHTML = question.operator;
    document.getElementById('second').innerHTML = question.second;
    form.elements.answer.value = '';
    form.elements.answer.focus();
    },


    answer: function (form) {
    var question = this.history[this.history.length - 1],
    answer = question.answer;
    question.guess = form.elements.answer.value;
    question.result = true;
    if (Number(question.guess) !== answer) {
    question.result = false;



    var correctAnswer = form.querySelector('.correctAnswer');
    correctAnswer.innerHTML = '<p>' + '<u>' + question.guess + '</u>'+ ' is NOT the right answer.</p>' +
    '<p>' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer + '</p>';



    // alert(question.guess + ' is not the right answer.\n\n' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer);

    form.elements.correctAnswer.style.display = 'none';


    // this code is for the incorrect answer (becarefull) to show upon incorrect answer and removes the correct image and message

    document.getElementById("incorrect").style.visibility = "visible";
    document.getElementById("TryAgain").style.visibility = "visible";

    form.elements.answer.style.backgroundColor="#F08080";

    document.getElementById("correct").style.visibility = "hidden";
    document.getElementById("WellDone").style.visibility = "hidden";


    }


    if (Number(question.guess) == answer) {
    question.result = true;


    var correctAnswer = form.querySelector('.correctAnswer');
    correctAnswer.innerHTML = '<p>' + '<u>' + question.guess + '</u>'+ ' is the RIGHT answer.</p>' ;

    // this code is for the correct answer (welldone) to show upon correct answer and removes the incorrect image and message

    form.elements.correctAnswer.style.display = '';
    document.getElementById("correct").style.visibility = "visible";
    document.getElementById("WellDone").style.visibility = "visible";

    form.elements.answer.style.backgroundColor="#98FB98";

    document.getElementById("incorrect").style.visibility = "hidden";
    document.getElementById("TryAgain").style.visibility = "hidden";


    }

    },


    summary: function () {
    var i,
    correct = 0,
    playtime = Math.floor((this.endTime - this.startTime) / 1000),
    average = Math.floor(playtime / this.totalQuestions * 10) / 10,
    summary = document.createDocumentFragment();
    for (i = 0; i < this.history.length; i += 1) {
    correct += (this.history[i].result ? 1 : 0);
    }
    summary.appendChild(document.createTextNode('You got ' + correct +
    ' questions right.'));
    summary.appendChild(document.createElement('br'));
    summary.appendChild(document.createTextNode('You played for ' + playtime + ' seconds, and took an average of ' + average + ' seconds to answer each question.'));
    document.body.appendChild(summary);
    }
    };

    window.questions.init(document.getElementById('game'));



    function timeMsg()
    {
    var t=setTimeout("alertMsg()",60000);
    }
    function alertMsg()
    {


    var r=confirm("Game Over!");
    if (r==true)
    {
    document.getElementById("Replay").style.visibility = "visible";}


    else

    {
    window.location.href = window.location.href;


    }

    };


    // this code is for the game over and it makes the reload button visible

    var c=60;
    var t;
    var timer_is_on=0;

    function timedCount()
    {
    document.getElementById('txt').value=c;
    c=c-1;
    t=setTimeout("timedCount()",1000);
    }

    function doTimer()
    {

    if (!timer_is_on)
    {
    timer_is_on=-1;
    timedCount();
    }
    }

    function stopCount()
    {
    clearTimeout(t);
    timer_is_on=60;
    }

  16. #66
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you advice me on my code please?

  17. #67
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by faez View Post
    Could you advice me on my code please?
    The way that you could do it is by passing a config object to the init method.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #68
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would it be possible to demonstrate this with an example please? as i am new to the concept of config object via alert.

  19. #69
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by faez View Post
    would it be possible to demonstrate this with an example please?
    Sure thing, there are several examples given in post #18 of this thread.

    Those pieces affect the minValue and maxValue parts of the questions object. The totalQuestions variauble is also a part of the questions object, that you can affect in the same way.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #70
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thank you.
    I understand how to set the question numbers, max and min.
    however, I would like the player to be able to change the pre-set number of questions online, which i am having difficulty with.

    I dont know how to make (post #63),

    init: function (form)
    {

    this.totalQuestions = var reply;
    }

    else
    alert ("Game number was not changed" + reply + " questions!");

    function reloadPage()
    {
    window.location.reload()
    }
    }

  21. #71
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by faez View Post
    I would like the player to be able to change the pre-set number of questions online
    You would do it by passing the totalQuestions to the init method as a part of the config object.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #72
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is this the correct way?


    window.questions = {
    history: [],

    init: function (form, config) {
    var reply;

    this.totalQuestions = var reply;

    },

  23. #73
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by faez View Post
    is this the correct way?
    No, that's not the correct way. The correct way is by passing the totalQuestions to the init method as a part of the config object.

    totalQuestions is a property of an object that is used to define the config. Before you can set the totalQuestions, you would want to get the number of questions that the person wants to use, right?

    Code javascript:
    var numberOfQuestions = parseInt(window.prompt('...')), 10) || 10;

    The parseInt(..., 10) converts the response to an integer using base 10 (decimal) so something like "09" is not mistaken for an Octal value.

    The || 10 part occurs if parseInt doesn't result in a meaningful value. In that case, a default value of 10 will be assigned to numberOfQuestions.

    You can then set the totalQuestions property of a config object, using that number of questions:

    Code javascript:
    var config = {
        ...,
        totalQuestions: numberOfQuestions
    }

    And you can then init the questions object using that config info.

    Code javascript:
    window.questions.init(..., config);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #74
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANK you for the explanations.

    my html page, now have the following codes:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Mind Game</title>



    <script type="text/javascript">

    function prompter()
    {
    var reply = prompt("How many questions would you like to, play?", "");

    alert("You game will now have " + reply + " questions!");

    };
    </script>

    </head>

    <body>


    <form id="game">
    <p>Question: <span id="questionnumber"></p>
    <p>What is <span id="first"></span> <span id="operator"></span> <span id="second"></span>?</p>
    <p><input name="answer" autocomplete="off"></label> <input type="submit" name="submit" value="answer"></p>

    <script src="scriptTesting.js"></script>


    <div id="QuestionNumber">
    <input type="button" onclick="prompter()" value="Type your Question number">

    <script type="text/javascript">
    window.questions.init(var, config);
    var config = {
    var numberOfQuestions = parseInt(window.prompt('...')), 10) || 10;
    totalQuestions: numberOfQuestions
    };
    </script>

    </div>
    </form>

    </body>
    </html>

    however, at run time it does not change the question number.
    could you kindly advise me how i can fix this please?

  25. #75
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as a second question - I have added an additional case to the 'operator type' called 'percent' and have change the operator type from 4 to 5:

    get: function () {
    var question = {},
    operatorType = Math.floor(Math.random() * 5 );
    do {
    question.first = Math.floor(Math.random() * 12) + 1;
    question.second = Math.floor(Math.random() * 12) + 1;
    switch (operatorType) {
    case 0:
    question.operator = '+';
    question.answer = question.first + question.second;
    break;
    case 1:
    question.operator = '-';
    question.answer = question.first - question.second;
    break;
    case 2:
    question.operator = '*';
    question.answer = question.first * question.second;
    break;
    case 3:
    question.operator = '/';
    question.answer = question.first / question.second ;
    break;
    case 4:
    question.operator = 'percent';
    question.answer = ((question.first / question.second) *100);
    break;

    default:
    question.operator = '';
    question.answer = '';
    }

    however, at run time, the percent or case 4 is not randomly selected (used in the question) - Could you kindly, indicate where I need to change?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •