"Silly story generator" assessment

Hi @nikhma99,

Thanks for submitting your code. This looks nearly perfect, except for one small thing. the reason “Bob” is not appearing is down to this line:

if(customName.value !== " ") {

This should be

if(customName.value !== "") {

the problem is that you are checking whether the value inside the input field is not equal to one space character, and if so, replacing Bob with a custom name. So if the input field is blank, it replaces Bob with nothing (blank).

Instead, you need to check whether the input field is not empty, and if so, replace Bob with a custom name.

Apart from that, full marks! Well done.

Hello everyone, good day. I just finished the ‘silly story generator assessment’ and would like someone to kindly assess it for me. Thanks.

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 fahrenheit 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 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){
return insertX[Math.floor(Math.random()*insertX.length)];
var yItem = randomValueFromArray(insertY){
return insertY[Math.floor(Math.random()*insertY.length)];
var zItem =randomValueFromArray(insertZ){
return insertZ[Math.floor(Math.random()*insertZ.length)];
newStory === newStory.replace (/:insertx:/g,xItem);
newStory === newStory.replace (:inserty:,yItem);
newStory === newStory.replace (:insertz:,zItem)

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

}

if(document.getElementById(“uk”).checked) {
var weight = Math.round(300 / 14) + ‘stones’;
var temperature = Math.round(94 - 32) * 5 / 9 + ‘centigrade’;
weight.replace(‘300 pounds’,weight)
temperature.replace(‘94 fahrenheit’,temperature)

}

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

Hi, maybe you can go through others reply, just call for the function like this: var xItem = randomValueFromArray(insertX);
and the converted formula is wrong: var temperature = Math.round((94-32) * (5/9)) + ’ centigrade’;

Hi @Missawi,

Thanks for submitting your code! As @fenng said, there are a couple of bits that you should try to fix (thanks for offering help, @fenng! ). After those fixes are made, the code should probably work OK. Let me know if you run into another other troubles.

Hi everyone, just finished the "silly story generator " and I would like someone to please assess my code, thank you so much.

See the Pen Silly Story Generator by Johana Morales (@hourwinner) on CodePen.

Hi there @Jo.M,

Thanks for sending in your code. Looking at it, it looks fine, except I noticed one small problem. When you press the UK checkbox and then regenerate the story, you end up with “34 centigrade fahrenheit” and “21 stone pounds”. You are only overwriting the value, not the value and the unit.

Look at our finished version:

You have got

var newStory = newStory.replace('300', weight);
var newStory = newStory.replace('94', temperature);

but it should be

newStory = newStory.replace('94 fahrenheit',temperature);
newStory = newStory.replace('300 pounds',weight);

Apart from that, it works just fine. Well done!

1 Like

hello, I’ve just completed the ‘Silly story generator’ assessment on the javascript first steps, can someone assess 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)];
}

let storyText = 'It was 94 fahrenheit 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 was not surprised — :insertx: weighs 300 pounds, and it was a hot day.';
let insertX = ['Willy the Goblin', 'Big Daddy', 'Father Christmas'];
let insertY = ['the soup kitchen', 'Disneyland', 'the White House'];
let insertZ = ['spontaneously combusted', 'melted into a puddle on the sidewalk', 'turned into a slug and crawled away'];

randomize.addEventListener('click', result);

function result() {
  let newStory = storyText;
  let xItem = randomValueFromArray(insertX);
  let yItem = randomValueFromArray(insertY);
  let zItem = randomValueFromArray(insertZ);
  newStory = newStory.replace(':insertx:', xItem).replace(':insertx:', xItem).replace(':inserty:', yItem).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 * 0.0714286) + ' stone';
    var temperature =  Math.round((94 - 32) / 1.8) + ' centigrade';
    newStory = newStory.replace('300 pounds', weight).replace('94 fahrenheit', temperature);
  }

  story.textContent = newStory;
  story.style.visibility = 'visible';
}

Hi @Tom-Vanderboom, nice to hear from you again!

I have checked out your code, and tested it, and it works perfectly; nice work!

The only comment I had is that I noticed you using a mix of var and let in the code. Were you just experimenting? It isn’t a problem, and I am glad to see you considering the new style variable declarations. Hopefully soon I will find some time to update the learning area examples to use let and const.

Thanks for your reply :smile: . Yes, and I found that using let can help me avoid making lots of mistakes :wink:. And I think I will use let as much as I can.

Hi @chrisdavidmills could you please review my code?
https://christineit.github.io/silly-story-generator/

// Complete variables and function definition
let customName = document.getElementById('customname');
let randomize = document.querySelector('.randomize');
let story = document.querySelector('.story');

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

let storyText = 'It was 94 fahrenheit 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 was not surprised — :insertx: weighs 300 pounds, and it was a hot day.'

// Raw text strings
let insertX = ['Willy the Goblin', 'Big Daddy', 'Father Christmas'];
let insertY = ['the soup kitchen', 'Disneyland', 'the White House'];
let insertZ = ['spontaneously combusted', 'melted into a puddle on the sidewalk', 'turned into a slug and crawled away'];


// Event Listener
randomize.addEventListener('click', result);

function result() {

let newStory = storyText;
let xItem = randomValueFromArray(insertX);
let yItem = randomValueFromArray(insertY);
let zItem = randomValueFromArray(insertZ);
newStory = newStory.replace(':insertx:', xItem);
newStory = newStory.replace(':inserty:', yItem)
newStory = newStory.replace(':insertz:', zItem)
newStory = newStory.replace(':insertx:', xItem)

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

}

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

story.textContent = newStory;
story.style.visibility = 'visible';

}

Also, is there a way to make this code more dry? I’m thinking with a for loop on the newStory = newStory.replace(’:insertx:’, xItem);
newStory = newStory.replace(’:inserty:’, yItem)
newStory = newStory.replace(’:insertz:’, zItem)
newStory = newStory.replace(’:insertx:’, xItem)

but not sure how to start since the insertx,y,z need to be replaced. Thank you for your time!

Hi @christineit,

Welcome to the MDN discourse forum!

I’ve looked over your code, and it looks and functions pretty much perfectly. Nice work, and congratulations.

On the subject of the replace() lines being more dry, yes, this would be a nice thing, particularly because the first and fourth lines are identical. This is because this form of replace() only replaces the first instance found in each case, and we want to replace :insertx: twice. There is a version of replace() that uses a regular expression and replaces all instances, but I didn’t use it here because regular expressions are hard, and I didn’t want to inflict those on beginners.

But feel free to give it a try. Have a look at

Look at the regex examples, and see if you can figure it out. If you get stuck, I’ll gladly jump in and help.

1 Like

Thank you for your response, and guidance!! I looked through the regex examples, and came up with this:

// Complete variables and function definition
let customName = document.getElementById('customname');
let randomize = document.querySelector('.randomize');
let story = document.querySelector('.story');

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

let storyText = 'It was 94 fahrenheit 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 was not surprised — :insertx: weighs 300 pounds, and it was a hot day.'

// Raw text strings
let insertX = ['Willy the Goblin', 'Big Daddy', 'Father Christmas'];
let insertY = ['the soup kitchen', 'Disneyland', 'the White House'];
let insertZ = ['spontaneously combusted', 'melted into a puddle on the sidewalk', 'turned into a slug and crawled away'];


// Event Listener
randomize.addEventListener('click', result);

function result() {


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

    newStory = newStory.replace(/:insertx:/g, xItem);
    newStory = newStory.replace(':inserty:', yItem);
    newStory = newStory.replace(':insertz:', zItem);
    

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

    }

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

    story.textContent = newStory;
    story.style.visibility = 'visible';
}

Please let me know if I am going in the right direction with regular expressions.

Yup, this is exactly what I would’ve done; nice work!

So this is a really simple regular expression example that just matches one exact instance of a string, but you could get much more complex here. And that’s why I didn’t want to go into regexs at this point in the course.

1 Like

Got it, thank you for your response! I look forward to learning more about regex as the course continues. :smile:

Well, to be more specific, I don’t cover regexs anywhere in the course, as I did’t consider them to be a beginner’s topic. We do have a decent guide covering them in the regular JavaScript guide, at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions.

And maybe I could add some more information if there was enough of a demand.

Dear MDN community, I just completed my “Silly story generator” and it works. It’s been an amazing experience so far.

Here’s my code for assessment, please. Your feedback and suggestions would be appreciated.

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

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

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

let insertx = [
  'Willy the Goblin',
  'Big Daddy',
  'Father Christmas'
];

let inserty = [
  'the soup kitchen',
  'Disneyland',
  'the White House'
];

let insertz = [
  'spontaneously combusted',
  'melted into a puddle on the sidewalk',
  'turned into a slug and crawled away'
];

randomize.addEventListener('click', result);

function result() {

  let newStory = storyText;

  let xItem = randomValueFromArray(insertx);
  let yItem = randomValueFromArray(inserty);
  let zItem = randomValueFromArray(insertz);

  newStory = newStory.replace(/:insertx:/g, xItem).replace(':inserty:', yItem).replace(':insertz:', zItem);

  if(customName.value !== '') {
    let name = customName.value;
    newStory = newStory.replace(/Bob/g, name);
  }

  if(document.getElementById("uk").checked) {
    let weight = Math.round(300/14) + ' stone';
    let temperature =  Math.round((94-32)*5/9) + ' Centigrade';
    newStory = newStory.replace('300 pounds', weight).replace('94 fahrenheit', temperature);
  }

  story.textContent = newStory;
  story.style.visibility = 'visible';
}

Many thanks.

Hi @samuel, and welcome to the MDN learning community! Thanks for sending your code in. I’ve had a look and I am pleased to say that it is working nearly perfectly. This is great effort, well done!

The only issue I found is that the conversion from Fahrenheit to Centigrade is not working. This is down to a simple typo:

newStory = newStory.replace('300 pounds', weight).replace('94 fahrenheit', temperature);

Should be

newStory = newStory.replace('300 pounds', weight).replace('94 Fahrenheit', temperature);

The matching is done case-sensitively, so if the casing is not exactly the same, the match is not found. Apart from that, everything is working great.

Hi @chrisdavidmills, noted with thanks. I’ll pay more attention to avoid typos.

Hello,

Here is my version of the exercise. Thank you in advance.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>Silly story generator</title>
    <style>
      body {
        font-family: helvetica, sans-serif;
        width: 350px;
      }

      label {
        font-weight: bold;  
      }

      div {
        padding-bottom: 20px;
      }

      input[type="text"] {
        padding: 5px;
        width: 150px;
      }

      p {
        background: #FFC125;
        color: #5E2612;
        padding: 10px;
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div>
      <label for="customname">Enter custom name:</label>
      <input id="customname" type="text" placeholder="">
    </div>
    <div>
      <label for="us">US</label><input id="us" type="radio" name="ukus" value="us" checked>
      <label for="uk">UK</label><input id="uk" type="radio" name="ukus" value="uk">
    </div>
    <div>
      <button class="randomize">Generate random story</button>
    </div>
    <p class="story"></p>

    <!-- JavaScript -->
    <script src="main.js"></script>
  </body>
</html>

main.js

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

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

let storyText = "It was 94 fahrenheit 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 was not surprised — :insertx: weighs \
300 pounds, and it was a hot day.";
let insertX = ["Willy the Goblin", "Big Daddy", "Father Christmas"];
let insertY = ["the soup kitchen", "Disneyland", "the White House"];
let insertZ = [
  "spontaneously combusted melted",
  "into a puddle on the sidewalk",
  "turned into a slug and crawled away"
];

randomize.addEventListener('click', result);

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

  newStory = newStory
    .replace(/:insertx:/g, xItem)
    .replace(/:inserty:/g, yItem)
    .replace(/:insertz:/g, zItem);

  if (customName.value !== '') {
    let name = customName.value;
    newStory = newStory.replace('Bob', name); 
  }

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

  story.textContent = newStory;
  story.style.visibility = 'visible';
}

Hi there @Soheil, and thanks for sending your code in!

This is perfectly answered — I would give this 100%! I particularly like that you’ve used such an elegant line for the replacement:

  newStory = newStory
    .replace(/:insertx:/g, xItem)
    .replace(/:inserty:/g, yItem)
    .replace(/:insertz:/g, zItem);

Using a regular expression version cuts down on the number of calls you need, and chaining them together makes the whole thing much shorter. Well done!