# "Silly story generator" assessment

**URL:** <https://discourse.mozilla.org/t/silly-story-generator-assessment/24686>\
**Category:** Learn\
**Created:** [June 26, 2017, 6:09am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686 "2017-06-26T06:09:55Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [January 2, 2018, 11:38am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/21 "2018-01-02T11:38:54Z")

</div>

@bishals is right - this should be `querySelector`, as it is selecting by the CSS class selector `.randomize`, not the actual class name, which is `randomize`.

Also, `getElementsByClassName` returns an array containing multiple element references, whereas `querySelector` returns a single element reference — the first element in the document that matches the provided selector.

Therefore the first one won’t work, but the second will.

---

<div class="post-metadata">

**Author:** ![jennoskl](https://avatars.discourse-cdn.com/v4/letter/j/278dde/32.png) [@jennoskl](https://discourse.mozilla.org/u/jennoskl)\
**Post date:** [January 2, 2018, 7:27pm UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/22 "2018-01-02T19:27:09Z")

</div>

I don’t understand this at all. I am using

```
var randomize = document.querySelector('.randomize');

```

just like you and several other people have suggested, and I keep getting the error

“randomize is null”

to be honest, I don’t think I have any idea of what I am doing, I am trying to follow people’s advice and not getting anywhere.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [January 2, 2018, 8:38pm UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/23 "2018-01-02T20:38:33Z")

</div>

I am sure there must be a simple explanation here. Can you send me your version of the code?

Send it to me at [cmills@mozilla.com](mailto:cmills@mozilla.com), and I’ll help you work out what’s wrong.

---

<div class="post-metadata">

**Author:** ![ameerkabir2](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@ameerkabir2](https://discourse.mozilla.org/u/ameerkabir2)\
**Post date:** [January 3, 2018, 9:06am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/24 "2018-01-03T09:06:55Z")

</div>

HI everyone here is my version of selly story it seems to be not working help pleas? var customName = document.getElementById(‘customname’);  
var randomize = document.querySelector(’.randomize’);  
var story = document.querySelector(’.story’);

```
  function randomValueFromArray(array){
    return array[Math.floor(Math.random()*array.length)];
    
    //the flowing three varabkes contains the randome text of the story 
    
    var storyTex = "It was 94 farenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but he was not surprised — :insertx: weighs 300 pounds, and it was a hot day."
    
    var stringX = ["Willy the Goblin","Big Daddy","Father Christmas"];
    
    var stringY = ["the soukitchen","Disneyland","the White House"];
    
    var stringZ = ["spontaneously combusted","melted into a puddle on the sidewalk","turned into a slug and crawled away"];
  
    
    randomize.addEventListener('click', result);

    function result() {

      if(customName.value != '') {
        var name = customName.value;
        newStory = newStory.replace("Bob",variable);

      }

      if(document.getElementById("uk").checked) {
        var weight = Math.round(300 * 0.071429) + "stone";
        var temperature = Math.round(94-32*.5556) + "centigrade";
        newStory.replace("weight","94 farenheit")
        newStory.replace("temperature", "300 pounds")

      }

      story.textContent = ;
      story.style.visibility = 'visible';
      
      var newStory = storyTex;
      var xItem = stringX;
    
      var yItem = stringY;
      
      var zItem = stringZ;
      newStory = newStroy.replace(":insertx:", stringX);
      newStory = newStory.replace(":inserty:", stringY);
      newStory = newStory.replace(":insertz:", stringZ);
        story = newStory;
      
      
    }
    
  }
</script>
```

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [January 3, 2018, 2:39pm UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/25 "2018-01-03T14:39:17Z")

</div>

Hi there!

From a quick glance, it looks like there are some spelling and other errors in the code that would need to be fixed before the example will work properly. Compare your code with the finished code at [https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/main.js](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/main.js).

also, as a hint, search for these errors in your code:

- storyTex (this appears a couple of times)
- newStroy
- The randomValueFromArray() function does not have a closing curly brace.

Let me know if you need any more help. Thanks!

---

<div class="post-metadata">

**Author:** ![RHG](https://avatars.discourse-cdn.com/v4/letter/r/b4bc9f/32.png) [@RHG](https://discourse.mozilla.org/u/RHG)\
**Post date:** [January 8, 2018, 10:38am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/26 "2018-01-08T10:38:03Z")

</div>

Hi there,

May I please have the marking guide for the Silly Story Generator?

Thanks,

RHG

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [January 8, 2018, 10:52am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/27 "2018-01-08T10:52:41Z")

</div>

Hi Henry,

Sure thing — no worries! You can find what you need below:

- Marking guide: [https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/marking-guide.md](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/marking-guide.md)
- Source code: [https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/main.js](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/main.js)
- Live example: [https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/)

Please let me know if you have any more questions.

All the best,

Chris

---

<div class="post-metadata">

**Author:** ![Breninio](https://avatars.discourse-cdn.com/v4/letter/b/c5a1d2/32.png) [@Breninio](https://discourse.mozilla.org/u/Breninio)\
**Post date:** [February 7, 2018, 11:21pm UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/28 "2018-02-07T23:21:08Z")

</div>

Hi Folks. Apologies but completely new to this and cant get silly story generator to work. The original story text keeps showing up when I click the button to generate a random story i.e. nothing gets replaced. My code is below. If anyone has any ideas as to why its not working I would appreciate it.

var customName = document.getElementById(‘customname’);  
var randomize = document.querySelector(’.randomize’);  
var story = document.querySelector(’.story’);

function randomValueFromArray(array){  
return array[Math.floor(Math.random()\*array.length)];  
}

var storyText = ‘It was 94 farenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but he was not surprised — :insertx: weighs 300 pounds, and it was a hot day.’;

var insertX = [ ‘Willy the Goblin’,  
‘Big Daddy’,  
‘Father Christmas’];

var insertY = [‘the soup kitchen’,  
‘Disneyland’,  
‘the White House’];

var insertZ = [‘spontaneously combusted’,  
‘melted into a puddle on the sidewalk’,  
‘turned into a slug and crawled away’];

randomize.addEventListener(‘click’, result);

function result() {

var newStory = storyText;  
var xItem = randomValueFromArray(insertX);  
var yItem = randomValueFromArray(insertY);  
var zItem = randomValueFromArray(insertZ);

newStory.replace(’:insertx:’, xItem);  
newStory.replace(’:inserty:’, yItem);  
newStory.replace(’:insertz:’, zItem);  
newStory.replace(’:insertx:’, xItem);

if(customName.value != ‘’) {  
var name = customName.value;  
newStory.replace(‘Bob’, name);  
}

if(document.getElementById(“uk”).checked) {  
var weight = Math.round(300\*.0714286) + ‘stones’;  
var temperature = Math.round(94-32) + ‘centigrade’;  
newStory.replace(‘94 farenheit’, temperature);  
newStory.replace(‘300 pounds’, weight);

}

story.textContent = newStory;  
story.style.visibility = ‘visible’;  
}

---

<div class="post-metadata">

**Author:** ![tomdrooker](https://avatars.discourse-cdn.com/v4/letter/t/6bbea6/32.png) [@tomdrooker](https://discourse.mozilla.org/u/tomdrooker)\
**Post date:** [February 8, 2018, 8:40pm UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/29 "2018-02-08T20:40:27Z")

</div>

Hi everyone - this is probably a really basic question, but just want to make sure I fully understand the script with this.

Could anyone explain the following syntax:

newStory = newStory.replace(’:insertx:’, xItem);

My instinct was to write newStory.replace(’:insertx:’, xItem); without the =, so just wondering why the first bit of the declaration is necessary?

Thanks for you help.

---

<div class="post-metadata">

**Author:** ![2alin](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/2alin/32/49543_2.png) [@2alin](https://discourse.mozilla.org/u/2alin)\
**Post date:** [March 2, 2018, 12:26am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/30 "2018-03-02T00:26:38Z")

</div>

Hi there!  
These are my [JS Code](https://github.com/2alin/2alin.github.io/blob/master/learn/mozilla/silly-story/main.js) and [live preview](https://2alin.github.io/learn/mozilla/silly-story/) of this assessment.

I haven’t compared it to chri’s code yet, but I don’t think there’s too much of a difference (steps were very specific and clear). Just two things that I made, and worth to point out:

1. I used global [RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) as argument in the `replace` string method to replace all matches at once, instead of calling two times `replace` as the guide suggested.

2. This one was funny 😅… while writing my code I thought that the user could write white spaces in the text field (beginning or end) and it could ruin the story structure, so I decided to make use of the `trim` method which gave me the desired results. But! when I came to the forum and started checking other fellow’s codes and tested them I noticed that even if they didn’t considered such cases and I entered names with leading/trailing spaces, the story didn’t show any extra spaces anyway.  
I was thrilled! So I tried to track down the reason of that… till I realized and remembered one of the first lessons of this guide about HTML parser ignoring extra spaces 🤣 .

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [March 7, 2018, 11:34am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/32 "2018-03-07T11:34:04Z")

</div>

Hi Tom,

Sorry for missing this post for so long.

This is a confusing one — basically, you need to write it like this because the `replace()` method creates a new copy of the string with the replacement made in it, rather than just making the replacement in the existing copy.

So if we just do `newStory.replace(’:insertx:’, xItem);`, it will create the new copy but not apply it to anything.

Doing `newStory = newStory.replace(’:insertx:’, xItem);` means thatit will create the new copy, and them immediately write it over the top of the existing `newStory` variable value.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [March 7, 2018, 11:40am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/33 "2018-03-07T11:40:50Z")

</div>

This is a really interesting point to bring up. The main reason I’ve not used the regex version is that I was worried regexes would be too complex for the beginner’s course. But I am open to opinions 😉

---

<div class="post-metadata">

**Author:** ![Taksh](https://avatars.discourse-cdn.com/v4/letter/t/b9bd4f/32.png) [@Taksh](https://discourse.mozilla.org/u/Taksh)\
**Post date:** [March 7, 2018, 2:36pm UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/34 "2018-03-07T14:36:01Z")

</div>

I coded this assessment but am facing a debugging issue. Although, everything seems fine with my code when I open my HTML file I get an undefined error in the story area.

Here’s my code:

var customName = document.getElementById(‘customname’);

var randomize = document.querySelector(’.randomize’);

var story = document.querySelector(’.story’);

function randomValueFromArray(array){

return array[Math.floor(Math.random()\*array.length)];

}

var storyText = ‘It was 94 farenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but he was not surprised — :insertx: weighs 300 pounds, and it was a hot day.’;

var insertX = [‘Willy the Goblin’, ‘Big Daddy’, ‘Father Christmas’];  
var insertY = [‘the soup kitchen’, ‘Disneyland’, ‘the White House’];  
var insertZ = [‘spontaneously combusted’, ‘melted into a puddle on the sidewalk’, ‘turned into a slug and crawled away’];

randomize.addEventListener(‘click’, result);

function result() {

```
var newStory = storyText;
var xItem = randomValueFromArray(insertX);
var yItem = randomValueFromArray(insertY);
var zItem = randomValueFromArray(insertZ);
newStory = newStory.replace(':insertx', xItem);
newStory = newStory.replace(':insertx', xItem);
newStory = newStory.replace(':inserty', yItem);
newStory = newStory.replace(':insertz', zItem);
if (customName.value != '') {

    var name = customName.value;
    newStory = newStory.replace('Bob', name);
}

if (document.getElementById("uk").checked) {

    var weight = Math.round(300);

    var temperature = Math.round(94);

    weight *= 0.0714286;
    temperature = (5 / 9) * (temperature - 32);
    var temp = temperature + ' celsius';
    storyText = storyText.replace('94 farenheit', temp);
    temp = weight + ' stones';
    storyText = storyText.replace('300 pounds',weight );
}

story.textContent = newStory;

story.style.visibility = 'visible';

```

}

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [March 7, 2018, 3:34pm UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/35 "2018-03-07T15:34:03Z")

</div>

Hi there @Taksh ,

Thanks for getting in touch!

I have tried your code out in my local version of the example, and it looks like it works mostly OK, except that the weight and temperature conversion goes a bit wrong. Have a look at the final block and see how it compares to yours:

```auto
  if(document.getElementById("uk").checked) {
    var weight = Math.round(300*0.0714286) + ' stone';
    var temperature = Math.round((94-32) * 5 / 9) + ' centigrade';
    newStory = newStory.replace('94 farenheit',temperature);
    newStory = newStory.replace('300 pounds',weight);
  }

```

I think the problem is mainly that you’re replacing the values inside `storyText`, not `newStory`.

A couple of other minor points:

1. For comparison, always use the strict version of the operator, so for example in this case, do `customName.value !== ''` — two equals, not 1. You get less errors this way, as it will only return true if the compared values are the same value AND data type.

2. In your series of replace lines, you need a extra colon on the end of each value you are replacing, so for example `:insertx:` rather than `:insertx`.

---

<div class="post-metadata">

**Author:** ![tomdrooker](https://avatars.discourse-cdn.com/v4/letter/t/6bbea6/32.png) [@tomdrooker](https://discourse.mozilla.org/u/tomdrooker)\
**Post date:** [March 7, 2018, 5:10pm UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/36 "2018-03-07T17:10:50Z")

</div>

Thanks for getting back Chris and taking the time to explain - that’s massively helped and makes perfect sense now. Thanks again!

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [March 7, 2018, 5:20pm UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/37 "2018-03-07T17:20:50Z")

</div>

You are welcome @tomdrooker !

---

<div class="post-metadata">

**Author:** ![2alin](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/2alin/32/49543_2.png) [@2alin](https://discourse.mozilla.org/u/2alin)\
**Post date:** [March 8, 2018, 6:37am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/38 "2018-03-08T06:37:02Z")

</div>

Well I only read over [mdn’s article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) and understood enough and a little more to apply it in our assessment, I’ll give it a deeper check once I encountered them again. And about using it in this module, it’s not a bad idea, you could mention “using regex” as an alternative to the task you asked and then leave us to find out how to use it, in case we are interested.

In my experience, when I read the hint you gave us about calling the `replace` method twice I thought to my self: there must be another way. Then I googled, found out about regex, came back to MDN (I prefer reading here at least all the basics, it’s super well structured and exemplified, kudos for you all) and found the article linked before.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [March 8, 2018, 8:32am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/39 "2018-03-08T08:32:00Z")

</div>

Cool, thanks for the further commentary. I’ve noted this down in my plan for 2018 tutorial updates, and will add at least a mention and link in (to the main regexs guide) when the time comes.

---

<div class="post-metadata">

**Author:** ![gnanavelv27](https://avatars.discourse-cdn.com/v4/letter/g/838e76/32.png) [@gnanavelv27](https://discourse.mozilla.org/u/gnanavelv27)\
**Post date:** [March 16, 2018, 5:12pm UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/40 "2018-03-16T17:12:08Z")

</div>

hello there,  
I have used same code from github:[https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/main.js](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/main.js)

I am getting typeerror:customName is null

why is it  
need some fix and explanation new to JS

---

<div class="post-metadata">

**Author:** ![sent2steven](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sent2steven](https://discourse.mozilla.org/u/sent2steven)\
**Post date:** [March 20, 2018, 5:54am UTC](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686/41 "2018-03-20T05:54:26Z")

</div>

Hi, i would like to request for marking guide on my code below for the exercise “Silly story generator”, thank you very much =)

```
var customName = document.getElementById('customname');
var randomize = document.querySelector('.randomize');
var story = document.querySelector('.story');

var storyText ="It was 94 farenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but he was not surprised — :insertx: weighs 300 pounds, and it was a hot day."
var insertX = ["Willy the Goblin",'Big Daddy',"Father Christmas"];
var insertY = ["the soup kitchen",'Disneyland',"the White House"];
var insertZ = ["spontaneously combusted",'melted into a puddle on the sidewalk',"turned into a slug and crawled away"];

randomize.addEventListener('click', result);

function result() {
  var xItem, yItem, zItem, randomName, newStory;
  newStory = storyText;
  xItem = randomValueFromArray(insertX);
  yItem = randomValueFromArray(insertY);
  zItem = randomValueFromArray(insertZ);

  function randomValueFromArray(array){
  		return array[Math.floor(Math.random()*array.length)];
  }

  if(customName.value != '') {
    var name = customName.value;
    randomName = storyText.replace("Bob", name);
	newStory = randomName;
  }

  if(document.getElementById("uk").checked) {
    var weight = Math.round(300*0.0714286);
    var temperature = Math.round((94-32)*.5556);
	ukTemp = newStory.replace("94", temperature + " centigrade").replace("300 pounds", weight + " stones");
    newStory = ukTemp
  }
  story.textContent = newStory.replace(":insertx:", xItem).replace(":insertx:", xItem).replace(":inserty:", yItem).replace(":insertz:", zItem);
  story.style.visibility = 'visible';
}
```

[Previous page](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686.md?page=1)

[Next page](https://discourse.mozilla.org/t/silly-story-generator-assessment/24686.md?page=3)