"Silly story generator" assessment

[somtougeman]

good morning, please i would like to request the marking guide for the silly story generator for JS begineer. Thank you so much. my email is somtougeman@gmail.com or can i paste my code here because i was having a little problem running a .replace(); in an array format.

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

// i think i am not writing the array well here 
        var newStory = [newStory.replace(':insertx:',xItem), newStory.replace('— :insertx:',xItem), newStory.replace(':inserty:',yItem), newStory.replace(':insertz:',zItem)];
    
  
  if(customName.value != '') {
    var name = customName.value;
    var newName = storyText.replace('bob',name);
  }

  if(document.getElementById("uk").checked) {
    var weight = Math.round(300*0.071429) + ' stones';
    var temperature =  Math.round((94-32)/1.8) + ' centigrade';
    var newWeight = storyText.replace('300 pounds',weight);
    var newTemperature = storyText.replace('94 farenheit',temperature); 
  }



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

I would really appreciate help. Thank you

[alex_light]

Hi somtougeman,
where you made comment in your code
// i think i am not writing the array well here
try this instead:

var newStory = [
newStory.replace(’:insertx:’,xItem).replace(’:inserty:’,yItem)
.replace(’:insertz:’,zItem).replace(’:insertx:’,xItem)
];

and change for this too

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

if (document.getElementById(“uk”).checked) {
var weight = Math.round(300*0.071429) + ’ stones’;
var temperature = Math.round((94-32)/1.8) + ’ centigrade’;

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

}

[Daniel_Clarke]

Hi I’ve just completed the Silly story generator on the javascript first steps, can someone please 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 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 Wonka’,‘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(’:inserty:’, yitem);
newStory = newStory.replace(’:insertz:’, zitem);
newStory = newStory.replace(’:insertx:’, xitem);

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]

Hi I’ve just completed the Silly story generator on the javascript first steps, can someone please assess my code:

I’ve had a look, and this seems to work fine - congratulations!

Although I did have to replace all the smart quotes with straight quotes before it would work. Did you and copy and paste it from Microsoft Word, or something?

One more nitpick - always use === and !== operators for comparisons, not == and !=

Read the note here for a explanation of why: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#Comparison_operators

[Daniel_Clarke]

I’ve had a look, and this seems to work fine - congratulations!

Although I did have to replace all the smart quotes with straight quotes before it would work. Did you and copy and paste it from Microsoft Word, or something?

Lol! No I copied it straight from jsbin.com - very strange…
Oh hang on, I don’t think the code properly indented when I pated it in so apart from the first line it looks like it has been formatted as a general text, would this have something to do with it?

[chrisdavidmills]

Lol! No I copied it straight from jsbin.com - very strange…

Oh hang on, I don’t think the code properly indented when I pated it in so apart from the first line it looks like it has been formatted as a general text, would this have something to do with it?

ah, that’s possible, yes!

[VictorChweya]

Just finished the Sill story generator it works ok, kindly help in marking it.

//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 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'];

//3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION

randomize.addEventListener('click', result);

function result() {
  var newStory = storyText;

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

  for (i = 0;  i<3; i++){
 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.toUpperCase());

  }

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

  }

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

[chrisdavidmills]

Hi there! Congratulations on a good job. From a brief look, it looks pretty good to me.

For further review, you are invited to check it against our finished version:

• Marking guide: 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
• Live version: https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/

[jbonpland (Julian Bonpland)]

Hi everyone, i’m just looking for a marking guide on one of my assessments :

Click me!

Cheers!

[chrisdavidmills]

Hi Julian,

From a cursory look, this looks like it does just what it supposed to do — well done!

I’d also like to invite you to check your version against the marking guide, and finished code example:

• 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/main.js
• https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/

[rajendra_prasad]

Hi, this is my story generator exercise. and I am stuck with my code.

this is the code that gone wrong:

<html>
<head>
   <title>flexbox</title>
</head>
<style>
    section{
        margin: auto;
        max-width: 500px;
        height: 500PX;
        display: flex;
        font-family:cursive;
        background: lightgrey;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;  
            }
    
    label{flex-grow: .1}
    .userinput1{ color:crimson;}
    .userinput2{ justify-content: flex-start;
         }
    .message{width: 50%;
            margin:10 auto;
            background: lightblue;
            line-height: 1.7;
    }
</style>
<body>
    <main>
        <section>
            <div class="userinput1">
                <label for="input">input text</label>
               
                <input type="text" role="text" id="uservalue" placeholder="typehere">
                <button>Go Head</button>
            </div>  
          <div class="userinput2">    
            <div class="us">
              <input type="radio" role="radio" name="us" class="us">
              <label for="us" role="us" >U.S</label>    
            </div>
            <div class="INDIA">
              <input type="radio" role="radio" class="india">
              <label for="us" role="us">INDIA</label>   
            </div>
            <button class="generatetext">generate story</button>
          </div>
            <div class="message">
              <p class="para"></p>
            </div>
        </section>
        <script>
        var textInput=document.querySelector("#uservalue");
        var textGenerator=document.querySelector(".generatetext");            
        var para=document.querySelector(".para");
            
            function randomTextGenerator(array){
                var counts=Math.floor(Math.random()*array.length);
                return array[counts];
            }
            
            var tetx = "Hellow this is my friend :john. this is :rajendra . i am from :india. i am professional :web-developer. i am also interested in music. ia mweight of 50 kgs. and to day its to hot , i think its around 76 centigrades.";
            
            var names = ["raj","paul","john","jock"];
            var location = ["us","pak","canada","dubai","china"];
            var profe = ["actor","dancer","doctor","engnr","media"];
            
             textGenerator.addEventListener('click', all);
             
            function all(){
                var store = tetx;
                var textX=randomTextGenerator(names);
                var textY=randomTextGenerator(location);
                var textZ=randomTextGenerator(profe);
                
                var finalX = store.replace(':rajendra', textX);
                var finalY = store.replace(':india', textY);
                var finalz = store.replace(':web-developoer', textZ);
                
                if(textInput.value !== ""){
                    var repla = textInput.value;
                    store = store.replace(':john', repla);
                }
                if(document.getElementsByClassName("us").checked){
                    var temp = Math.round(333*0.4324) + "centigrades";
                    var weight = Math.round((94-32) * 5 / 9) +  "kgs";
                    store = store.replace('50 kgs', weight);
                    store = store.replace('76 centigrades.',temp);
                          }
                
                para.textContent=store;
                para.style.visibility="visible";
            }
        </script>
    </main>
</body>

[James.K (James Katarikawe)]

Silly Story Generator Assessment

I completed the ‘Silly Story Generator’ assessment by following the walk-through and applying the ideas I picked up from studying the content under the section ‘JavaScript First Steps’.

Find the solution code at this link at assessment-one-solution

[chrisdavidmills]

Hi James.K,

Congratulations - I’ve tried it, and this looks like it works really well.

[James.K (James Katarikawe)]

Thank you.
I highly appreciate the work you are doing putting up this content.

James Katarikawe
m:
+256773172487
e:
jpkatarikawe@gmail.com

[noorit2515 (Livai)]

Hello Sir, I just finished “Silly story generator” and would appreciate a marking guide,
and I also have a doubt about the conditional statement in the raw-text.txt file it says “if(customName.value != ’ ') {…}” shouldn’t it be
" if (customName.value !== ’ ') {…}" or is it okay or am I wrong?
Thank you! I really appreciate you for helping us through YOU ARE AWSOME!!

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

//3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION

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(’: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((3000.071428)+’ stone’);
var temperature = Math.round((94 - 32) 5/9)+’ centigrade’;
newStory = newStory.replace(‘94 farenheit’, temperature);
newStory = newStory.replace(‘300 pounds’, weight);

}

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

[jennoskl]

Hey everyone, I am soooooo confused by the errors I am receiving during this assignment.

Right now I am trying to resolve “TypeError: randomize.addEventListener is not a function”

and also customName is logging as ‘null’ ?!

var customName = document.getElementById('customname');
var randomize = document.getElementsByClassName('.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’];

var newStory = storyText;


function randomValueFromArray(array){

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

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

randomize.addEventListener('click', result);

var result = function result() {

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

}

if(document.getElementById("uk").checked) {
var weight = Math.round(300 * 0.071429);
var temperature =  Math.round(94 - 32 * (5/9));

newStory.replace('300 pounds', weight + 'stones');
newStory.replace('94 farenheit', temperature + 'c');

}

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

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

}

[bishals (Bishal Sh23)]

try changing:
var randomize = document.getElementsByClassName(’.randomize’);

with

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

[jennoskl]

When I wrote it like that, the console told me the value of “randomize” was null, so I changed it to remove the error on the console.

[noorit2515 (Livai)]

Hello there, there seem to be a few things wrong in your code, I too had the same mistake so lemme explain it to you.
1 .var randomize = document.getElementsByClassName(’.randomize’); I don’t really know about this selector but since the randomize has a ‘.’ in it it’s okay to put 'querySelector; for it
2. I don’t think that the position of the randomValueFromArray() function will cause much of the problem but there is a ‘;’ at the end of the closed curly bracket which is not needed. I think this may be the problem for the function you were mentioning.
3.next you need to put all of the xItem,yItem & zItem variable inside the result function not outside I did the same mistake too.
4. and you need to go through the placeholder in the newStory again cuz there are some problems in it and they too should be inside the result function
5. and you need to concatenate the temperature and weight with stone and centigrade for readability
If you still Have any doubts feel free to ask
I hope I have eased you with my help
And you are you have reached so far on your own which is completely amazing keep up the good-work and these things should be a piece of cake for you ^^.

[chrisdavidmills]

Hi there @jennoskl - did you get the code to work? Let me know if you still have problems, and I will do my best to help you.