"Silly story generator" assessment

(Chris Mills) #72

Hi @leezeelola, I’ve looked over your code, and it works just great. Well done on a great effort!

You can find our finished resources below:

(Abdulhaq) #73

Hi, I just completed my “Silly story generator” assessment, please i would like someone to 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)];
}

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);
var yItem = randomValueFromArray(insertY);
var zItem = randomValueFromArray(insertZ);

newStory = newStory.replace('insertx',insertX);
newStory = newStory.replace('inserty',insertY);
newStory = newStory.replace('insertz',insertZ);
newStory = newStory.replace('insertx',insertX);


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);

  newStory = newStory.replace('94 Fahrenheit', 94);
  newStory = newStory.replace('300 pound', 300);

  newStory = newStory.replace(300,300 / 14 +' stone');
  newStory = newStory.replace(94,(94 - 32) * 5/9 +' centigrade');

}

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

}

(Jussanothergull) #74

Thanks for your help, and don’t worry about it taking a while! I got distracted by other things in the meantime and only remembered to check the forum again just now. Your solution does solve my problem.

(Chris Mills) #75

Cool, you’re welcome. Happy to help.

(John Greene) #76

Hi there,

I’ve just completed the Silly story generator assessment.

Can I get someone to mark through my code, please?

Many 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);
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*0.071429) + ‘stone’;
var temperature = Math.round(94-32)*0.56 + ‘centigrade’;
newStory.replace (‘94 fahrenheit’, temperature);
newStory.replace (‘300 pounds’, weight);

}

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

(Chris Mills) #77

Hi @greene.john1985,

Thanks for sending in your submission!

This largely looks similar to my final version, but I did notice a couple of small things that needed tweaking for it to work:

  1. At the bottom of the following block, the curly brace is superfluous. Remove it to make the code work.
	newStory.replace (':insertx', xItem);
	newStory.replace (':inserty', yItem);
	newStory.replace (':insertz', zItem);
	newStory.replace (':insertx', xItem);
}
  1. The following block needs fixing:
	newStory.replace (':insertx', xItem);
	newStory.replace (':inserty', yItem);
	newStory.replace (':insertz', zItem);
	newStory.replace (':insertx', xItem);

to this:

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

replace() doesn’t update the existing object; it returns a new object. So if you want the changes to be applied to the same object, you need to explicitly set it like this.

  1. Same thing with this line:
newStory.replace ('Bob', name);

to

newStory = newStory.replace ('Bob', name);
  1. Same thing with these lines:
newStory.replace ('94 fahrenheit', temperature);
newStory.replace ('300 pounds', weight);

to

newStory = newStory.replace ('94 fahrenheit', temperature);
newStory = newStory.replace ('300 pounds', weight);
  1. I also updated these lines:
var weight = Math.round(300*0.071429) + ' stone';
var temperature = Math.round((94-32)*0.56) + ' centigrade';

You can find our finished resources below; check these for more information:

(Hahawill) #78

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)];
}

/* I can’t understand above function, can your explain it tanks!
Why your code add: return array[random]; in this function buttom.
*/

var storyText = ‘It w as 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);
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*0.0714286) +'stone';
var 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’;
}

(Ivan) #79

Verify my code, please:
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);
var newStory = storyText;
var xItem = randomValueFromArray(insertX);
var yItem = randomValueFromArray(insertY);
var zItem = randomValueFromArray(insertZ);
newStory =newStory.replace(’:insertx:’, xItem);
newStory = newStory.replace(’:inserty:’, yItem);
newStory = newStory.replace(’:insertz:’, zItem);
newStory = newStory.replace(’:insertx:’, xItem);
function result() {

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

}

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

}

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

(Chris Mills) #80

Hi there @ProRok, thanks for submitting your code!

I’ve had a look, and this looks mostly correct. There were just a couple of bits of code to put right.

  1. First of all, you need to put this block inside the event handler 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(':inserty:', yItem);
newStory = newStory.replace(':insertz:', zItem);
newStory = newStory.replace(':insertx:', xItem);

If you don’t then it only runs once; we want it to run every time you click the button, so you get a different story generated each time.

  1. Second, you need to change the if statement that controls whether a custom name is used. It is currently like this:
if(customName.value !== 'Bob') {
var name = customName.value;
newStory = newStory.replace('Bob', name);
}

You should change the top line to

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

This way it only inserts a custom name if there is one written into the text input. The way you have it, if you leave the input empty, it deletes the name “Bob”, so the sentence looks wrong.

(Nik) #81

good morning, please I would like to request the marking guide for the silly story generator for JS beginner.
here is my code.

//COMPLETE VARIABLE AND FUNCTION DEFINITIONS

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)];
}

//RAW TEXT STRING

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”]

//EVENT LISTENER AND PARTIAL FUNCTION DEFINITION

randomize.addEventListener(‘click’, result);

function result() {
var newStory = storyText; //his is needed so we can create a new random story each time the button is pressed and the function is run
var xItem = randomValueFromArray(insertX);
var yItem = randomValueFromArray(insertY);
var zItem = randomValueFromArray(insertZ); //the result in each case will be a random item out of each array it is called on

newStory = newStory.replace(/:insertx:/g, 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 / 14) + " stone";
newStory = newStory.replace("300 pounds", weight);
var temperature =  Math.round((94 - 32) * (5/9)) + " centigrade";
newStory = newStory.replace("94 fahrenheit", temperature);

}

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

}

The only problem I got is that ‘Bob’ doesn’t appear. I don’t know how to fix it.

(Nik) #82

you forgot a quote mark after the conditional operator

(Chris Mills) #83

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.

(Awele) #84

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’;
}

(fenng) #86

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’;

(Chris Mills) #87

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.

(Juanita2545) #89

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.

(Chris Mills) #90

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
(Tom Vanderboom) #91

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';
}
(Chris Mills) #92

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.

(Tom Vanderboom) #93

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.