JSFiddle - React, Tailwind, and code Playground

by boazmier

HTML

<body>

<!-- contaning all display -->
<div class="container">

    <!-- contaning header -- navgiation -->
    <header class="row">
        <div class="span12">
            <nav class="navbar">
                <div class="navbar-inner">
                    <a href="#" class="brand">Boaz Hoch</a>

                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>

                    <div class="nav-collapse collapse">
                  <ul class="nav">
                      <li><a href="index.html">Home</a></li>
                      <li><a href="about.html">About</a></li>
                      <li><a href="proggres.html">My Proggres</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Follow Me
                          <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="https://www.facebook.com/boazmier">FaceBook</a></li>
                              <li><a href="https://plus.google.com/113694258444420573992/posts">Google +</a></li>
                              <li><a href="http://www.linkedin.com/profile/view?id=255626257&trk=nav_responsive_tab_profile">Linked-In</a></li>
                          </ul>
                      </li>
                      <li><a href="#" class="text-right"></a></li>
                  </ul>
                    </div>
                </div>
            </nav>
        </div>

    </header>

    <!-- End of Header -->

    <!-- contaning main part -->
    <section class="row" id="main-container">
        <div class="well span6 offset3">
            <form>
                <fieldset>
                    <legend>Login</legend>
                    <input id="fn"...

JavaScript

//Start of User Constuctor
function User(firstName, lastName) {
    this.first = firstName;
    this.last = lastName;
    this.quizScores = [];
    this.currentScore = 0;
}

User.prototype = {
    constructor: User,
    saveScore: function (theScoreToAdd) {
        this.quizScores.push(theScoreToAdd)
    },
    showNameAndScores: function () {
        var scores = this.quizScores.length > 0 ? this.quizScores.join(",") : "No  Scores Yet";
        return this.first + " " + this.last + scores;
    }
}

//End of User constructor

//Start of Question Constuctor
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;
}

function Question(question, choices, correctAnswer) {
    //those will be uniqe for every question made
    this.question = question;
    this.choices = choices;
    this.correctAnswer = correctAnswer;
    this.userAnswer = "";

    console.log("created");
}

Question.prototype.getCorrectAnswer = function () {
    return this.correctAnswer;
};

Question.prototype.getUserAnswer = function () {
    return this.userAnswer;
};

Question.prototype.displayQuestion = function () {
    this.question;
    choiceCounter = 0;

    this.choices.forEach(function (eachQuestion) {
        choiceCounter;
       ...