"Silly story generator" assessment

zfigz · September 10, 2018, 12:59pm

no worries, you’ve done an incredible job at making all of the resources easy to understand and succinct. keep up the awesome work.

chrisdavidmills · September 10, 2018, 1:03pm

Thanks for the kind words. It makes me really happy to hear such things.

kamil.hawrylkowicz · September 18, 2018, 5:53pm

Hello,
Im still complete newbie but i tried hard and made somethin like this. It works so I hope it is fine ;D

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:/g, xItem)
newStory = newStory.replace(/:inserty:/g, yItem)
newStory = newStory.replace(/:insertz:/g, 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';
    var temperature = Math.round(((94 - 32) * 5) / 9) + 'centigrade';

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

}

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

}

chrisdavidmills · September 19, 2018, 9:11am

Hi there @kamil.hawrylkowicz. This is a good effort — well done! The code seems to work as it is supposed to. There was one bug I noticed, in this block:

if (document.getElementById('uk').checked) {
    var weight = Math.round(300 / 14) + 'stone';
    var temperature = Math.round(((94 - 32) * 5) / 9) + 'centigrade';

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

}

centigrade should have a leading space.
farenheit should be fahrenheit

Otherwise the temperature substitution won’t work.

This bug was present in our version; I’ve fixed it now.

Apart from that, great!

akiotakata · September 28, 2018, 7:28pm

Hello! just finished this assesment. Seems to work fine. Can anyone help me checking my code? Thank you

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:’, 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)/1.8) + ’ centigrade’;
newStory = newStory.replace(‘300 pounds’, weight);
newStory = newStory.replace(‘94 fahrenheit’, temperature);

}

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

}

chrisdavidmills · October 1, 2018, 8:21am

Hello @akiotakata! Thanks for submitting your assessment work. This works as expected, and the code looks pretty much perfect. Well done!

jussanothergull · October 12, 2018, 9:50am

Hi! I tried to use a regular expression to replace all instances of :insertx:, but I am having a problem that I run into even before adding the ‘gi’ attribute. The replace function seems to treat my regex as a string, so it keeps the slashes. This is the code that is causing a problem:

  var xItem = randomValueFromArray(insertX);
  xItem = RegExp( xItem);
  newStory = newStory.replace(':insertx:', xItem);

I get a text that looks like this:

so /Willy the Goblin/ went for a walk

when I expected

so Willy the Goblin went for a walk

I eventually solved the problem without a regular expression by using ‘while newStory.indexOf(’:insertx:’) >== 0 )’, but I would still like to know what I did wrong.
Thanks!

chrisdavidmills · October 30, 2018, 4:23pm

Hi there @jussanothergull! Sorry for taking so long to reply to this.

So you are kind of on the right track, but the syntax is not quite right.

To include a regex, the easiest way is to just create a literal regex — just the regex surrounded in forward slashes. There is no need to use the Regexp constructor.

You then include the flags after the second forward slash — g to replace all matches, not just one, and i to ignore case.

So for :insertx:, the following code would work:

  var xItem = randomValueFromArray(insertX);
  newStory = newStory.replace(/:insertx:/gi, xItem);

You’d obviously need to write similar code to replace :inserty: and :insertz:.

leezeelola · November 16, 2018, 11:23am

Hi there, I have just completed my Silly story generator assessment, please can someone help check out my code and also share the marking guide, It works just fine for me

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

//2. RAW TEXT STRINGS

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"];

//3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION

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 !== '') {
var name = customName.value;
newStory = newStory.replace('Bob',name);

}

if(document.getElementById(“uk”).checked) {
var weight = Math.round(300 / 14) + ’ 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’;
}

Thanks all.

chrisdavidmills · November 16, 2018, 5:10pm

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:

Haq · November 19, 2018, 12:07am

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 · November 28, 2018, 8:58am

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.

chrisdavidmills · November 28, 2018, 9:20am

Cool, you’re welcome. Happy to help.

greene.john1985 · December 6, 2018, 5:59pm

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

chrisdavidmills · December 12, 2018, 3:02pm

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:

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

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.

Same thing with this line:

newStory.replace ('Bob', name);

to

newStory = newStory.replace ('Bob', name);

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

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 · January 19, 2019, 4:07pm

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

ProRok · February 10, 2019, 2:22pm

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

chrisdavidmills · February 11, 2019, 10:25am

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.

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.

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.

nikhma99 · February 20, 2019, 4:16pm

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.

nikhma99 · February 20, 2019, 4:24pm

you forgot a quote mark after the conditional operator