Quote:
Originally Posted by mllanapatriciac
Hi it's not a javascript class, it's actually a Communication Technology class in the html unit my teacher decided to include javascript as a chapter.  |
Well, I think your teacher is a little too ambitious! However, see if the following would satisfy him/her:
Code:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SIMPLE QUIZ JS</title>
<style type="text/css">
body {
background: #9d9d9d;
}
#page {
width: 962px;
padding: 2px;
margin: 22px auto;
}
#q {
border: 4px solid #6299C5;
padding: 0 8px;
background: #ededed;
}
div.quizQ {
border-bottom: 1px solid #bcbcbc;
background: #ededed;
padding: 12px;
margin: 0;
}
div.quizQ h3 {
margin-bottom: 8px;
}
#score {
background-color: #6299C5;
border: 1px solid #cdcdcd;
padding: 8px 10px;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
}
#h {
background-color: #6299C5;
border: 3px solid #cdcdcd;
padding: 8px 10px;
color: #FFFFFF;
font-weight: bold;
}
#c {
width: 777px;
border:1px solid #bebebe;
padding:6px;margin:0;
color:#dfdfdf;
font-family: "Courier New", Courier, monospace;
font-weight:bold;
font-style: italic;
}
</style>
<script type="text/javascript">
/* <![CDATA[ *///Copyright (c) nobody 2010 -> until the sun burns the F**K out of us...
///Simple-Quiz-JS created by MENIME & oVTech
function addEvent(elm, evType, fn) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, false);
} else if (elm.attachEvent) {
elm.attachEvent('on' + evType, fn);
} else {
elm['on' + evType] = fn;
}
}
function getTarget(e){
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target){return false;}
while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){
target=target.parentNode;
}
return target;
}
//The Quiz
var Quiz = {
answers: [],
correctAnswers: ["a", "b", "c"],
initQuiz: function () {
var arrInp = document.getElementsByTagName('input');
for (var i=0; i<arrInp.length; i++) {
if (arrInp[i].type.toLowerCase() == "radio") {
addEvent( arrInp[i], 'click', Quiz.getAnswer);
}
}
},
getAnswer: function (e) {
var thisRadio = getTarget(e);
var which = thisRadio.getAttribute("rel");
var val = thisRadio.getAttribute("value");
var group = thisRadio.getAttribute("name");
Quiz.recordAnswer( which, val, group )
},
recordAnswer: function (question, userAnswer, groupName) {
Quiz.answers[question] = userAnswer;
var formName = document.myForm;
for (var i=0; i<formName.elements.length; i++) {//here we disable what's already checked
if (formName.elements[i].name == groupName) {
formName.elements[i].disabled = true;
}
}
},
scoreQuiz: function () {
var totalCorrect = 0;
for (var i = 0; i<Quiz.correctAnswers.length; ++i) {
if (Quiz.answers[i] == Quiz.correctAnswers[i]) {
++totalCorrect;
}
}
alert( "You scored " + totalCorrect + " out of " + Quiz.correctAnswers.length );
}
};
function loadEvnts() {
Quiz.initQuiz();
var scoreIt = document.getElementById('score');
addEvent( scoreIt, 'click', Quiz.scoreQuiz);
}
addEvent( window, 'load', loadEvnts);
/* ]]> */
</script>
</head>
<body>
<form name="myForm">
<div id="page">
<h3 id="h">Quiz Time!</h3>
<div id="q">
<div class="quizQ">
<h4>What is the first letter in the word "JAVASCRIPT"?</h4>
<input type="radio" rel="0" value="a" name="grp0"/> J <br /> <!--Correct Answer: A-->
<input type="radio" rel="0" value="b" name="grp0"/> A <br />
<input type="radio" rel="0" value="c" name="grp0"/> V <br />
</div>
<div class="quizQ">
<h4>What is the fifth letter in the word "JAVASCRIPT"?</h4>
<input type="radio" rel="1" value="a" name="grp1"/> A <br />
<input type="radio" rel="1" value="b" name="grp1"/> S <br /> <!--Correct Answer: B-->
<input type="radio" rel="1" value="c" name="grp1"/> C <br />
</div>
<div class="quizQ">
<h4>What is the ninth letter in the word "JAVASCRIPT"?</h4>
<input type="radio" rel="2" value="a" name="grp2"/> R <br />
<input type="radio" rel="2" value="b" name="grp2"/> I <br />
<input type="radio" rel="2" value="c" name="grp2"/> P <br /> <!--Correct Answer: C-->
<input type="radio" rel="2" value="d" name="grp2"/> T <br />
</div>
<div style="padding:8px 2px;background:#ededed;">
<input type ="button" id="score" value="Score Quiz" />
</div>
</div>
<br />
<p id="c">
///Copyright (c) nobody 2010 -> until the sun burns the F**K out of us...<br />
///Simple-Quiz-JS created by MENIME & oVTech
</p>
<br /> <br />
</div>
</form>
</body>
</html>