CODEWITHSUNDEEP
javascripthtml
user1869915
user1869915

Reputation: 25

Random Array of Sentences?

Javascript noob here.... I am trying to build a site that will help my kids read predefined sentences from a select group, then when a button is clicked it will display one of the sentences. Is an array the best option for this?

For example, I have this array (below) and on the click of a button I would like one of these sentences to appear on the page.

<script type="text/javascript">
Sentence = new Array()
Sentence[0]='Can we go to the park.';
Sentence[1]='Where is the orange cat? Said the big black dog.';
Sentence[2]='We can make the bird fly away if we jump on something.'
Sentence[3]='We can go down to the store with the dog. It is not too far away.'
Sentence[4]='My big yellow cat ate the little black bird.'
Sentence[5]='I like to read my book at school.'
Sentence[6]='We are going to swim at the park.'
</script>

Again, is an array the best for this and how could I get the sentence to display? Ideally I would want the button to randomly select one of these sentences but just displaying one of them for now would help.

Upvotes: 2

Views: 3163

Answers (5)

rwheadon
rwheadon

Reputation: 241

Personally I think you should spend some time forging through something Implementing JSON.

Although it would, in essence end up an array... JSON is probably more flexible and you can embed more information about the question as you need it.

I suspect your requirements can become more sophisticated as time rolls on and the extra time parsing out some JSON is fairly trivial. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Simple use of JSON</title>
<script type="text/javascript">
    //ultimately this will be in a file that you will access so you don't have to update code when the list changes.
    var sentence_json = '{ "sentences" : [{ "sentence" : "Can we go to the park.", "difficulty" : "1" },' + 
    '{ "sentence" : "Where is the orange cat? Said the big black dog.", "difficulty" : "2" },' + 
    '{ "sentence" : "We can make the bird fly away if we jump on something.", "difficulty" : "3" },' + 
    '{ "sentence" : "We can go down to the store with the dog. It is not too far away.", "difficulty" : "3" },' + 
    '{ "sentence" : "My big yellow cat ate the little black bird.", "difficulty" : "2" },' + 
    '{ "sentence" : "I like to read my book at school.", "difficulty" : "1" },' + 
    '{ "sentence" : "We are going to swim at the park.", "difficulty" : "1" }]}';

    //this should go through a parser... but for simplest example:
    var sentence_obj = eval ("(" + sentence_json + ")");
</script>
</head>
<body>
<p>
    Sentence: <span id="sentence"></span><br>
    Difficulty: <span id="difficulty"></span><br>
</p>
<script type="text/javascript">
    //here's where you use an iterator, but static for the example.
    document.getElementById("sentence").innerHTML=sentence_obj.sentences[1].sentence 
    document.getElementById("difficulty").innerHTML=sentence_obj.sentences[1].difficulty
</script>       
</body>
</html>

Simply addressing the question about is it "best" which is kind of relative. HERE is a working example where I added a button "and stuff".

Upvotes: 0

joeyramone76
joeyramone76

Reputation: 241

It's simple enough to just use an array. Here is an example of doing so and retrieving a random sentence:

 var sentences = [
    'Can we go to the park.',
    'Where is the orange cat? Said the big black dog.',
    'We can make the bird fly away if we jump on something.',
    'We can go down to the store with the dog. It is not too far away.',
    'My big yellow cat ate the little black bird.',
    'I like to read my book at school.',
    'We are going to swim at the park.'
],

//the number of sentences in the array
maxSentences = sentences.length;

//get and return a random sentences from array
function getRandomSentence() {
    //calculate a random index
    var index = Math.floor(Math.random() * (maxSentences - 1));
    //return the random sentence
    return sentences[index];
}

To display the random sentence in a div, you can use a function like this: (note that this example uses jQuery to simplify, and to provide for cross browser usage):

//show a random sentences in a DOM selector
function showRandomSentence(selector){
    var randomSentence = getRandomSentence();  
    $(selector).html(randomSentence);
}

To see a working example of the above, visit this jsFiddle ​

Upvotes: 3

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

Array is fine for this purpose:

You can use this code to randomly display sentence in specified div:

var sentences = [
    'Can we go to the park.',
    'Where is the orange cat? Said the big black dog.',
    'We can make the bird fly away if we jump on something.',
    'We can go down to the store with the dog. It is not too far away.',
    'My big yellow cat ate the little black bird.',
    'I like to read my book at school.',
    'We are going to swim at the park.'
];

var rand = sentences[Math.floor(Math.random() * sentences.length)];

$('#divid').text(rand); 

//If you don't fancy jQuery then do this instead
document.getElementById('divid').innerHTML = rand;

Working DEMO

Upvotes: 3

dchhetri
dchhetri

Reputation: 7136

here is an live example. Hopefully, you are using jquery. It makes things easy.

The main part is this, which picks random sentence from the array.

 var randomIndex = Math.floor((Math.random()*Sentence.length)); //random number from [0,Sentence.length)
$("#sentence-div").text( Sentence[randomIndex] );

Upvotes: 1

Kevin Boucher
Kevin Boucher

Reputation: 16675

An array seems like a good choice to me. You can also define it this way:

var sentences = [
    'Can we go to the park.',
    'Where is the orange cat? Said the big black dog.',
    'We can make the bird fly away if we jump on something.',
    'We can go down to the store with the dog. It is not too far away.',
    'My big yellow cat ate the little black bird.',
    'I like to read my book at school.',
    'We are going to swim at the park.'
];

Upvotes: 1

Related Questions