You are welcome, chris. To help and share is a community’s philosophy 
.
@2alin Thank you very much for helping it works. can you suggest any Ideas to master the eventHandlers.
@gnanavelv27, well what it worked for me was to read at least 3 times the Introduction to events lesson over the time, and in practice —when I have doubts of a piece of code doing what it should— I use a lot console.log and it had helped me understand how complicated stuff —like event objects, at that moment— work.
An event is an action that happens with/on an element (being clicked, mouse over it, mouse out of it, key pressed, etc); an event handler or event listener are functions or pieces of code that are waiting for that event to happen, and when it does they execute; and event object are objects (set of properties and methods, with their respective values) that gives you information of a given event, for example the element that the event is imposed on ( which is the target property) and helps you do stuff with that particular element when the event is fired.
Again, embrace console.log, it will help you a lot to understand what’s going on when stuff gets really messy.
//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)];
}
// RAW TEXT STRINGS
var temperature = 94 + ’ pounds’;
var weight = 300;
var insertX = [ ‘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 storyText= 'It was ’ + temperature + ’ farenheit outside, so ’ + xItem +
’ went for a walk. When they got to ’ + yItem +
',they stared in horror for a few moments, then ’ + zItem +
'.thing, but was not surprised ’ + xItem +
’ weighs '+ weight + ‘, and it was a hot day.’;
// 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);
function result(){
if(customName !==’’){
var name = customName.value;
newStory = newStory.replace(‘Bob’,name);
}
if (document.getElementById('uk').checked){
weight = Math.round(300) + ' stone';
temperature = Math.round(94) ;
}
}
story.textContent = newStory;
story.style.visibility = ‘visible’;
Hi Ram,
This is a good effort, thanks for trying out the example. Your code has gone a bit wrong in a few places. You are using variables in your string rather than placeholders that could be substituted. This is an ok alternative approach, but you need to make sure that variables you are trying to use are declared before you try to use them in the string.
Also, think about where you are playing other instructions — in this case you are only creating a single silly story, as soon as the app loads, but all the variables are coming up undefined (for reasons touched on above). You want to make it so that a silly story is generated each time the button is pressed, but not before.
You can find our finished version here, for reference:
- Marking guide: https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/marking-guide.md 3
- Source code: https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/main.js 1
- Live example: https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/
I put the script tag in the beginning and used the “async” word, it worked.
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 / 14) + ' stones';
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';
}newStory = newStory.replace(’:insertx:’, xItem);
newStory = newStory.replace(’:insertx:’, xItem);
This could genarate two different xItem. In the “Hints and tips” part of this lesson, there is a method like this to replace all the strings that have the same value globally:
text.replace(/love/g,‘like’);
So we can add this line for the same random value for xItem:
newStory=newStory.replace(/:insertx:/g,xItem);
Yup, this is true. The reason why I showed the inefficient way in the main example (and only offered the regex version as an alternative lower down) is because I didn’t want to get into a discussion of how regexs work at this stage in a beginner’s course.
2 Likes
After a lot of trial and error / occasionally looking at the source, I’ve finished this assignment, but I’m having issues with the centigrade temp appearing when the UK radio button is selected. I’ve pasted my code below:
thanks for all y’all’s help!
Thanks for submitting your code — it looks great!
I’ve worked out the answer to your question above. My original version had the word “fahrenheit” spelled wrong. Someone fixed it in most places, but in my final version, it was still wrong in the following line:
newStory = newStory.replace('94 farenheit',temperature);
I’ve fixed it now, and updated it on our GitHub repo.
1 Like
i sure do feel silly now in how simple that was. thanks for bringing it to my attention @chrisdavidmills and thank you for all of your hard work.
I think this was my fault really — I should have made sure it was fixed everywhere. At least we worked it out!
no worries, you’ve done an incredible job at making all of the resources easy to understand and succinct. keep up the awesome work.
Thanks for the kind words. It makes me really happy to hear such things.
1 Like
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';
}
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);
}
-
centigradeshould have a leading space. -
farenheitshould befahrenheit
Otherwise the temperature substitution won’t work.
This bug was present in our version; I’ve fixed it now.
Apart from that, great!
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’;
}
Hello @akiotakata! Thanks for submitting your assessment work. This works as expected, and the code looks pretty much perfect. Well done!
1 Like
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!