Physics is beautiful problem

by Nic Scozzaro

HTML

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css">
<script src="https://fonts.googleapis.com/css?family=Roboto"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Physics is beauti\(\!\int\!\)ul.</a>
      </div>

      <ul class="nav navbar-nav navbar-right">
        <li id="name"></li>
        <li><a class="center">Dashboard</a>
          <li><a href="/logout.php">Logout</a>

      </ul>
    </div>
  </nav>

  <div class="container">
    <div class="question" id='ajaxDiv'>
      <div class="row">
        <div class="col-md-6 text-center">
          <div class="bounding-box">
            <h1 id='ajaxDiv'>What direction is \(\vec{A} \) pointing?</h1>
            <div class="thumbnail">
              <img src="http://physicsisbeautiful.osu.edu/mathProblemPage/images/vectorproblems/Slide1.PNG">
            </div>
          </div>
        </div>

        <div class="col-md-6 text-center">
          <div class="bounding-box">
            <h1>Select answer below:</h1>
            <a class="btn btn-primary btn-lg" id="answer1">\( \hat{x}\)</a>
            <a class="btn btn-primary btn-lg" id="answer2">\( -\hat{x}\)</a>
            <a class="btn btn-primary btn-lg" id="answer3">\( \hat{y}\)</a>
            <a class="btn btn-primary btn-lg" id="answer4">\( -\hat{y}\)</a>
          </div>
        </div>
      </div>

    </div>

    <button id="incorrect" type="button"...

CSS

html,
body {
  background-color: #f1f1f1;
}

.navbar.navbar-default {
  background: #1caff6;
  background-image: linear-gradient(to bottom, #20a8e9, rgba(30, 158, 220, 0.5));
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgba(32, 166, 231, 0.8);
  height: auto;
  min-height: 70px;
  background-color: rgba(32, 166, 231, 0.8);
  background-image: -moz-linear-gradient(top, #20a8e9, rgba(30, 158, 220, 0.5));
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#20a8e9), to(rgba(30, 158, 220, 0.5)));
  background-image: -webkit-linear-gradient(top, #20a8e9, rgba(30, 158, 220, 0.5));
  background-image: -o-linear-gradient(top, #20a8e9, rgba(30, 158, 220, 0.5));
  background-image: linear-gradient(to bottom, #20a8e9, rgba(30, 158, 220, 0.5));
  background-repeat: repeat-x;
}

.navbar.navbar-default a {
  color: white;
  font-size: 250%;
  font-family: Tw Cen MT;
}

.nav.navbar-nav.navbar-right a {
  height: 5 px;
  padding: 1 px;
  margin-top: 6px;
  margin-right: 5px;
  margin-left: 10px;
  color: white;
  font-size: 150%;
  font-family: Tw Cen MT;
  border-radius: 15px;
  border: 2px solid white;
}

.nav.navbar-nav.navbar-right a:hover {
  color: #686868;
  cursor: pointer;
  border: 2px solid #686868;
}

.container {
  position: relative;
  min-width: 80vw;
  margin-top: 1%;
  border-radius: 15px;
  padding: 4vh;
  min-height: 80vh;
  background-color: white;
  box-shadow: 0 0 10px #d8d8d8;
  padding-bottom: 2vh
}

.container h1 {
  font-size: 120%;
}

.btn {
  padding: 14px 24px;
}

.bounding-box {
  border-radius: 25px;
  padding: 2vh;
  background-color: white;
  box-shadow: 0 0 10px #d8d8d8;
  max-height: 58vh;
  margin: 2vh;
  padding-bottom: 6vh;
}

.bounding-box a {
  margin: 5px;
}

.progress-bottom-container {
  position:...

JavaScript

var main = function() {
  // DEFINE THE PROBLEM'S ANSWER (THE ID OF A BUTTON (btn btn-primary btn-lg) IN THE HTML ABOVE)
  answer = 'answer1';
  // HIDE THE GREEN CHECK MARK AND RED X
  $("#correct").hide();
  $("#incorrect").hide();
  // THIS FUNCTION SAYS THAT IF YOU CLICK ON A BUTTON...
  $(".btn").click(function() {
    userAnswer = $(this).attr('id'); // GRAB THE ID OF THAT BUTTON...
    if (userAnswer == answer) { // AND IF THAT BUTTON'S ID MATCHES THE ANSWER ID...
      correct(); // RUN THE CORRECT() FUNCTION...
    } else { // OTHERWISE...
      incorrect(); // RUN THE INCORRECT() FUNCTION
    }
  });
}
$(document).ready(main);

// INITIALIZE USER SCORE AND DEFINE PERCENT COMPLETE FUNCTION : user must obtain 8 points to complete section
score = 0;
numberOfProblems = 8;

function percent() {
  return score / numberOfProblems * 100
};

// CORRECT : the function that is executed when a problem is answered correctly
function correct() {
  $("#correct").fadeIn();
  correctAnswer = true;
  score = Math.ceil(score + 1);
  $(".progress-bar").width(percent() + '%');
  if (Math.ceil(score) == numberOfProblems) {
    lessonComplete();
  } else {
    ajaxRequest();
    saveData();
    $("#correct").fadeOut("slow");
  }
};

// INCORRECT : the function that is executed when a problem is answered incorrectly
function incorrect() {
  $("#incorrect").fadeIn();
  correctAnswer = false;
  if (score - 0.5 < 0) {
    score = 0;
  } else {
    score = score - 0.5;
  }
  $(".progress-bar").width(percent() + '%');
  ajaxRequest();
  saveData();
  $("#incorrect").fadeOut("slow");
};

// LESSON COMPLETE! The function that is executed when the user completes a lesson
function lessonComplete() {

  //Ajax retrieval: $.post("link_to_file", {parameters to pass}, action to take upon success)      
  $.post("lessonComplete.php", {
      ID: user,
      account: account
    },
    function(data) {
      $("#ajaxDiv").html(data);
    }
  );
}

// SAVE DATA: The function that uploads the...