Learning Project Step 4 Report: Add style to learning content on website

Step 3: Add learning content as HTML to website

• For and While Loops

Score: 10

Evaluation & Deliverables:

This week I learned about if/else statements and for/while/do loops in JavaScript. I also did checked out how to get JavaScript to do things with your HTML. As part of my application of what I learned, I completed the practice questions in the lesson portion of my website. The practice questions either have users type the correct letter answer or check the appropriate box to answer a question. The questions are built into the lessons to let users try out what they are learning.

Things have been successful so far. I think I am making good progress. I think I might see if I can change the learning goals over the next few weeks and what my deliverables will be. I noticed that my first learning contract isn't spelling out what learning material will be most applicable to my project. I think I could use some help in identifying what I should specifically learn about JavaScript to get my game up and running.

Anyways, here is an example of one of my practice questions using HTML field boxes and JavaScript:

<div id="tryItOut">
<h3>Try it out:</h3>
<p><em>Let's just see if you can tell what the commas in each of these sentences are doing. Match the sentence with the right description of how the comma is used:</em></p>
<div class="tryItOutCheckBox">
<input class="fieldBox" id="commaQuestionOne" type="text"> 1. Add the following ingredients together: strawberries, oreos, and vanilla ice cream.<br><br>
<input class="fieldBox" id="commaQuestionTwo" type="text"> 2. We'll go to that class, but I don't think it will make a difference.<br><br>
<input class="fieldBox" id="commaQuestionThree" type="text"> 3. After the dance, we'll head to the movies.<br><br>
<h3>Answers</h3>
<p>A. bring two ideas together into the same sentence</p>
<p>B. separate background info from the main idea of the sentence</p>
<p>C. make lists</p>
<p id="submitButton" onclick="checkAnswerFunction()">Submit</p>
</div>
<script>
function checkAnswerFunction() {
var questionOne = document.getElementById("commaQuestionOne").value;
var questionTwo = document.getElementById("commaQuestionTwo").value;
var questionThree = document.getElementById("commaQuestionThree").value;
var answerARight = "Great! We have two ideas that are being brought together into the same sentence!"
var answerAWrong = "Almost. There aren't two ideas being brought together here. You should be able to separate the two ideas and make them into their own sentences that would make sense to someone if you read them out loud."
var answerBRight = "Nice work! We have some background info that is helping explain the main idea."
var answerBWrong = "Close. Background info can be removed from the sentence, and the sentence will still be able to make sense on its own."
var answerCRight = "Way to go! We have a list of items here."
var answerCWrong = "Not quite. A sentence with a list presents something that you could check off when each thing was done or obtained. "
if (questionOne === "c" || questionOne === "C") {
document.getElementById("feedback1").innerHTML="1. "+answerCRight;
} else if (questionOne === "b" || questionOne === "B") {
document.getElementById("feedback1").innerHTML="1. "+answerBWrong;
} else if (questionOne === "a" || questionOne === "A") {
document.getElementById("feedback1").innerHTML="1. "+answerAWrong;
} else {
document.getElementById("feedback1").innerHTML="1. Not a valid answer."
}
if (questionTwo === "c" || questionTwo === "C") {
document.getElementById("feedback2").innerHTML="2. "+answerCWrong;
} else if (questionTwo === "b" || questionTwo === "B") {
document.getElementById("feedback2").innerHTML="2. "+answerBWrong;
} else if (questionTwo === "a" || questionTwo === "A") {
document.getElementById("feedback2").innerHTML="2. "+answerARight;
} else {
document.getElementById("feedback2").innerHTML="2. Not a valid answer."
}
if (questionThree === "c" || questionThree === "C") {
document.getElementById("feedback3").innerHTML="3. "+answerCWrong;
} else if (questionThree === "b" || questionThree === "B") {
document.getElementById("feedback3").innerHTML="3. "+answerBRight;
} else if (questionThree === "a" || questionThree === "A") {
document.getElementById("feedback3").innerHTML="3. "+answerAWrong;
} else {
document.getElementById("feedback3").innerHTML="3. Not a valid answer."
}
}
</script>
<div id="feedback">
<h3>Feedback</h3>
<p id="feedback1"></p>
<p id="feedback2"></p>
<p id="feedback3"></p>
</div>
</div>