Source code for: '../ebiz/enterprise/JsOop/test1.html'
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScripted OOP and CSS Inheritance</title>
<style>
.heading,.heading-red,.heading-blue {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-decoration: none
}
.heading-red {
color: #FF0000;
}
.heading-blue {
color: #3344FF;
}
.heading-green {
color: #00AA00;
}
</style>
<script type="text/javascript">
//code based on: http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/
function inheritPrototype(childObject, parentObject) {
// As discussed above, we use the Crockford’s method to copy the properties and methods from the parentObject onto the childObject
// So the copyOfParent object now has everything the parentObject has
var copyOfParent = Object.create(parentObject.prototype);
//Then we set the constructor of this new object to point to the childObject.
//This step is necessary because the preceding step overwrote the childObject constructor when it overwrote the childObject prototype (during the Object.create() process)
copyOfParent.constructor = childObject;
// Then we set the childObject prototype to copyOfParent, so that the childObject can in turn inherit everything from copyOfParent (from parentObject)
childObject.prototype = copyOfParent;
}
// The Question function is the parent for all other question objects;
// All question objects will inherit from this Question constructor
function Question(theQuestion, theChoices, theCorrectAnswer) {
// Initialize the instance properties
this.question = theQuestion;
this.choices = theChoices;
this.correctAnswer = theCorrectAnswer;
this.userAnswer = "";
// private properties: these cannot be changed by instances
var newDate = new Date(),
// Constant variable: available to all instances through the instance method below. This is also a private property.
QUIZ_CREATED_DATE = newDate.toLocaleDateString();
// This is the only way to access the private QUIZ_CREATED_DATE variable
// This is an example of a privilege method: it can access private properties and it can be called publicly
this.getQuizDate = function () {
return QUIZ_CREATED_DATE;
};
// A confirmation message that the question was created
console.log("Quiz Created On: " + this.getQuizDate());
}
// Define the prototype methods that will be inherited
Question.prototype.getCorrectAnswer = function () {
return this.correctAnswer;
};
Question.prototype.getUserAnswer = function () {
return this.userAnswer;
};
Question.prototype.getChoices = function () {
return this.choices;
};
Question.prototype.displayQuestion = function () {
var questionToDisplay = "<div class='question'>" + this.question + "</div><ul>";
choiceCounter = 0;
this.choices.forEach(function (eachChoice) {
var start = '<li><input type="radio" id="choice" name="group1" value="' + choiceCounter + '"';
if (choiceCounter == 0){
start += 'checked>';
}
else {
start += '>';
}
questionToDisplay += start + eachChoice + '</li>';
choiceCounter++;
});
questionToDisplay += "</ul></div>";
document.write(questionToDisplay);
console.log (questionToDisplay);
};
// Create the MultipleChoiceQuestion
function MultipleChoiceQuestion(theQuestion, theChoices, theCorrectAnswer){
// For MultipleChoiceQuestion to properly inherit from Question, here inside the MultipleChoiceQuestion constructor, we have to explicitly call the Question constructor
// passing MultipleChoiceQuestion as the this object, and the parameters we want to use in the Question constructor:
Question.call(this, theQuestion, theChoices, theCorrectAnswer);
};
// inherit the methods and properties from Question
inheritPrototype(MultipleChoiceQuestion, Question);
var myQuestion = new MultipleChoiceQuestion("Who is the most current Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 3);
function getRadioButtonValue()
{
var radio = document.getElementsByName("group1");
for (var ii = 0; ii < radio.length; ii++)
{
if (radio[ii].checked){
var answer = myQuestion.getChoices()[ii];
//alert(radio[ii].value);
alert("Your choice: "+ answer);
if (myQuestion.getCorrectAnswer() == ii) {
answer = "<span class=\"heading heading-green\">" + answer + "</span>";
answer += " is <font color=\"Green\"> correct </font> answer";
} else {
answer = "<span class=\"heading-red\">" + answer + "</span>";
answer += " is <font color=\"Red\"> wrong </font> answer";
}
console.log (answer);
document.getElementById("answer").innerHTML = "<P>" + answer + "</P>";
}
}
return false;
}
</script>
</head>
<body bgcolor="#C2C2C6">
<table>
<tr><td align=center>
<h1>JavaScript OOP and CSS Inheritance </h1>
<h2>Example 1: A Simple Quiz</h2>
<p class="heading-blue">JavaScript: Class - Instance -Inheritance</p>
<p class="heading heading-green">CSS: Class - 2 Ways of Inheritance</p>
<hr />
</td></tr>
<tr><td align=left>
<!--<form id="form1">-->
<script type="text/javascript">
myQuestion.displayQuestion();
</script>
<div id="answer"> </div>
<button id="submit" onClick="getRadioButtonValue();">Submit</button>
<hr>
</td></tr>
<tr><td align=center>
<a href="/cgi-bin/getfile.py?filename=../ebiz/enterprise/JsOop/test1.html">View script code</a>
</td></tr>
</table>
</body>
</html>