Hi Peeps,
I have ran into a wall with my project - a fill-in-the-blank game about using primary resources.
The problem I have is on the Work View scene, I created a little grey button to get to it quickly while testing (I had to delete the videos so I can upload the file here. )
So - for the fill-in-the-blank portion I successfully added the novel text with input boxes to fill in the blanks. The first problem is obtaining the user’s input from these boxes and simply putting them in console.log so I can do stuff with them later. But because the inputs are in the innerHTML it doesn’t seem like it can grab them by it’s name or id. What am I doing wrong or is their a better way of doing this?
The second part is adding the submit button and a white box at the bottom of the last paragraph. I thought of making the elements ‘visible’ but I’ve tried it many different ways and can’t seem to make it work.
Thank you in advance!
var chapter1_p1 = "<p>"+"There was so much smoke I still wonder how I was able to escape the gapes of the U.S soldiers. Running next to me was my mother but as I looked behind me I saw my friends, beaten down, some mortally injured. We made our way deep into the swamps where the soldiers couldn’t get us. Crouched in a make-shift tent with my stomach aching of hunger I gazed up to the stars and recollected what had brought this awful situation to my family. I may have only been 9 years old at that time, but I already knew that the world was filled with injustice."+"</p>";
var chapter1_p2 = "<p>"+"My great-grand-uncle, the prophet and Red Stick Creek chief, Peter McQueen, opened my eyes to the reality we lived in. He told me how things were, how they are, and how they will be if we continued to let the U.S government interfere in our lands. He would say that this turmoil began with the arrival of the Europeans but I think I can pinpoint the exact event that led me to be here - crouching under this tent…."+"</p>";
var chapter1_p3 = "<p>" + "American settlers kept taking our land and livestock, even killing us red people for it. Despite sending notice to their <input class='w3-input' type='text' name='headman' id='headman' value=''>, nothing was done about these crimes. The last straw was drawn when a group of hunters from the Seminole town, Fowltown, were shot and killed and their livestock taken. Instead of writing another letter that would be ignored, about 15 warriors set out to find the greedy Indian killer. In a cottage, west of <input class='w3-input' type='text' name='type' id='Wayne' value=''> County, a kettle of one of the hunters was found near the chimney stove. Enraged by the sight, the warriors sought to find the killer but in his absence killed (a) <input class='w3-input' type='text' name='type' id='woman' value=''> and two children. They then took the cattle that the white frontiersman had stolen back to Fowltown."+ "</p>"
//for the var submitimage I would like to make visible hypeDocument.getElementById('submit_btn') and hypeDocument.getElementById('submit_white')
var submitimage = function (){hypeDocument.getElementById('submit_btn').style.visibility = 'visible'; hypeDocument.getElementById('submit_white').style.visibility = 'visible'; };
//then when you click 'submit_btn' the user's input should appear in the console
var chap1input1 = document.getElementsByName('headman')[0].value;
function testuserinput() { console.log(chap1input1)};
hypeDocument.getElementById("submit_btn").addEventListener('click', testuserinput);
hypeDocument.getElementById('Novel_Text').innerHTML = chapter1_p1 + chapter1_p2 + chapter1_p3 + submitimage;
ArchivesQuest-VideoRemoved.hypetemplate.zip (725.6 KB)
