Source code for: '../ebiz/enterprise/JsOop/test1.html'

<!DOCTYPE html>
      <meta http-equiv="content-type" content="text/html;charset=utf-8">
      <title>JavaScripted OOP and CSS Inheritance</title>


       .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;


      <script type="text/javascript">
       //code based on:

       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>';
	     questionToDisplay += "</ul></div>";

	     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:, 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("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;

   <body bgcolor="#C2C2C6">
     <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 />
     <tr><td align=left>
      <!--<form id="form1">-->
      <script type="text/javascript">
      <div id="answer">  </div>
      <button id="submit" onClick="getRadioButtonValue();">Submit</button>
	  <tr><td align=center>

      <a href="/cgi-bin/">View script code</a>