Step 5: Create content for assessments
- Control Flow from Codecademy
Score: 10
Evaluation & Deliverables:
This week I learned about switch statements from Codecademy. I think I see how it applies to making a game. I could see there being multiple buttons, and the switch statement identifies what to do when one of those buttons is pressed.For the deliverables, I made the assessment for my website. The assessment captures the score of all the items into a cookie, saves it, and uploads it on a results page. There is a pre assessment and post assessment. On the post assessment result page, the results of the pre assessment are included alongside the post assessment scores so that the user can see how the two tests differ. The cookie is set to last for 30 days from when it is made...which makes me think that I should have an easy way for a user to come back to the website and see the results without having to go through the assessment (which would then create new cookies and delete the old ones). I'll add that to the list of things to do. It was great to get this to work. Figuring out the JavaScript syntax for making and reading cookies was an adventure.
Here's the code for a pre assessment page that makes a cookie, followed by a results page that reads the cookie (or a link to see the real thing in action: https://googledrive.com/host/0Bwuo-xxRHyjmOXZSZHA4YmVRSE0/punctuation_project/pre_assessment.html)--
Preassessment question page:
<div id="right">
<br>
<h1>Colons</h1>
<div id="quiz">
<p>1. What can you use colons for? Check all that apply.</p>
<div class="tryItOutCheckBox">
<input id="colonQuestionOneA" type="checkbox"> A. Indicate 'more to come' before the next idea.<br><br>
<input id="colonQuestionOneB" type="checkbox"> B. Separate background information from the main idea of a sentence.<br><br>
<input id="colonQuestionOneC" type="checkbox"> C. Separate items in a list.<br><br>
<input id="colonQuestionOneD" type="checkbox"> D. Introduce a list.<br><br>
</div>
<p>2. Check the boxes next to the sentences that properly use the colon:</p>
<div class="tryItOutCheckBox">
<input id="colonQuestionTwoA" type="checkbox"> A. Please take out<span style="font-family:Arial">:</span> your textbook, a calculator, and a pencil.<br><br>
<input id="colonQuestionTwoB" type="checkbox"> B. There is only one thing to do<span style="font-family:Arial">:</span> jump in a lake.<br><br>
<input id="colonQuestionTwoC" type="checkbox"> C. Here is what we'll do today<span style="font-family:Arial">:</span> swim, hike, and roast mallows.<br><br>
</div>
<p>3. Add colons where they are needed:</p>
<div class="tryItOutCheckBox">
<p> A. I would like <input id="colonQuestionThreeAOne" type="text" class="fieldBox"> a hamburger <input id="colonQuestionThreeATwo" type="text" class="fieldBox"> and fries.</p>
<p> B. Here's what we'll do <input id="colonQuestionThreeBOne" type="text" class="fieldBox"> make like trees <input id="colonQuestionThreeBTwo" type="text" class="fieldBox"> and leave.</p>
<p> C. Please write the following <input id="colonQuestionThreeCOne" type="text" class="fieldBox"> your first name, last name, and birthdate.</p>
</div>
<script>
var QuestionOneAScore = 0;
var QuestionOneBScore = 0;
var QuestionOneCScore = 0;
var QuestionOneDScore = 0;
var QuestionTwoAScore = 0;
var QuestionTwoBScore = 0;
var QuestionTwoCScore = 0;
var QuestionThreeAOneScore = 0;
var QuestionThreeATwoScore = 0;
var QuestionThreeBOneScore = 0;
var QuestionThreeBTwoScore = 0;
var QuestionThreeCOneScore = 0;
var totalScore = 0;
function addScoreFunction() {
totalScore = (QuestionOneAScore + QuestionOneBScore + QuestionOneCScore + QuestionOneDScore + QuestionTwoAScore + QuestionTwoBScore + QuestionTwoCScore + QuestionThreeAOneScore + QuestionThreeATwoScore + QuestionThreeBOneScore + QuestionThreeBTwoScore + QuestionThreeCOneScore);
setCookie();
}
function setCookie() {
var date = new Date();
date.setTime(date.getTime()+(30*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = "colonScore=" + totalScore + ";" + expires + "path=/";
}
function submitAnswerFunction() {
var QuestionOneA = document.getElementById("colonQuestionOneA").checked;
var QuestionOneB = document.getElementById("colonQuestionOneB").checked;
var QuestionOneC = document.getElementById("colonQuestionOneC").checked;
var QuestionOneD = document.getElementById("colonQuestionOneD").checked;
var QuestionTwoA = document.getElementById("colonQuestionTwoA").checked;
var QuestionTwoB = document.getElementById("colonQuestionTwoB").checked;
var QuestionTwoC = document.getElementById("colonQuestionTwoC").checked;
var QuestionThreeAOne = document.getElementById("colonQuestionThreeAOne").value;
var QuestionThreeATwo = document.getElementById("colonQuestionThreeATwo").value;
var QuestionThreeBOne = document.getElementById("colonQuestionThreeBOne").value;
var QuestionThreeBTwo = document.getElementById("colonQuestionThreeBTwo").value;
var QuestionThreeCOne = document.getElementById("colonQuestionThreeCOne").value;
if (QuestionOneA == true) {
QuestionOneAScore = 1;
} else {
QuestionOneAScore = 0;
}
if (QuestionOneB == false) {
QuestionOneBScore = 1;
} else {
QuestionOneBScore = 0;
}
if (QuestionOneC == false) {
QuestionOneCScore = 1;
} else {
QuestionOneCScore = 0;
}
if (QuestionOneD == true) {
QuestionOneDScore = 1;
} else {
QuestionOneDScore = 0;
}
if (QuestionTwoA == false) {
QuestionTwoAScore = 1;
} else {
QuestionTwoAScore = 0;
}
if (QuestionTwoB == true) {
QuestionTwoBScore = 1;
} else {
QuestionTwoBScore = 0;
}
if (QuestionTwoC == true) {
QuestionTwoCScore = 1;
} else {
QuestionTwoCScore = 0;
}
if (QuestionThreeAOne === "") {
QuestionThreeAOneScore = 1;
} else {
QuestionThreeAOneScore = 0;
}
if (QuestionThreeATwo === "") {
QuestionThreeATwoScore = 1;
} else {
QuestionThreeATwoScore = 0;
}
if (QuestionThreeBOne === ":") {
QuestionThreeBOneScore = 1;
} else {
QuestionThreeBOneScore = 0;
}
if (QuestionThreeBTwo === "") {
QuestionThreeBTwoScore = 1;
} else {
QuestionThreeBTwoScore = 0;
}
if (QuestionThreeCOne === ":") {
QuestionThreeCOneScore = 1;
} else {
QuestionThreeCOneScore = 0;
}
addScoreFunction();
}
</script>
<br>
<p class="right" onclick="submitAnswerFunction()"><a href="semicolonPreQuiz.html">Next-></p>
</div>
</div>
Preassessment Results Page:
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>The Punctuation Project</title>
<script>
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCommaScore() {
var commaPreScore=getCookie("commaScore");
if (commaPreScore >= 12) {
document.getElementById("feedback1").innerHTML=commaPreScore +"/14 - Excellent! You know your commas!";
} else if (commaPreScore >= 9 && commaPreScore <= 11) {
document.getElementById("feedback1").innerHTML=commaPreScore
+ "/14 - You know quite a bit about commas. Reviewing commas in the lessons could still be helpful";
} else {
document.getElementById("feedback1").innerHTML=commaPreScore + "/14 - It would be helpful for you to brush up on commas";
}
checkColonScore();
}
function checkColonScore() {
var colonPreScore=getCookie("colonScore");
if (colonPreScore >= 10) {
document.getElementById("feedback2").innerHTML=colonPreScore +"/12 - Excellent! You know your colons!";
} else if (colonPreScore >= 7 && colonPreScore <= 9) {
document.getElementById("feedback2").innerHTML=colonPreScore
+ "/12 - You know quite a bit about colons. Reviewing colons in the lessons could still be helpful";
} else {
document.getElementById("feedback2").innerHTML=colonPreScore + "/12 - It would be helpful for you to brush up on colons";
}
checkSemicolonScore();
}
function checkSemicolonScore() {
var semicolonPreScore=getCookie("semicolonScore")
if (semicolonPreScore >= 10) {
document.getElementById("feedback3").innerHTML=semicolonPreScore +"/14 - Excellent! You know your semicolons!";
} else if (semicolonPreScore >= 8 && semicolonPreScore <= 9) {
document.getElementById("feedback3").innerHTML=semicolonPreScore
+ "/14 - You know quite a bit about semicolons. Reviewing semicolons in the lessons could still be helpful";
} else {
document.getElementById("feedback3").innerHTML=semicolonPreScore + "/14 - It would be helpful for you to brush up on semicolons";
}
}
</script>
</head>
<body onload="checkCommaScore()">
<div id="header">
<h1>The Punctuation Project</h1>
</div>
<div id="left">
<div id="navbar">
<ul>
<a href="web_resource_mainpage.html"><li>Home</li></a>
<a href="pre_assessment.html"><li class="current">See What You Know</li></a>
<a href="lessons.html"><li>Learn the Marks</li></a>
<a href="game.html"><li>Test Your Skills</li></a>
<a href="post_assessment.html"><li>See if You've Got It</li></a>
</ul>
</div>
</div>
<div id="right">
<br>
<h1>Here are the results of your pretest:</h1>
<div class="tryItOutCheckBox">
<h2>Commas</h2>
<p id="feedback1">...</p>
<h2>Colons</h2>
<p id="feedback2">...</p>
<h2>Semicolons</h2>
<p id="feedback3">...</p>
</div>
