Review test

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="linq.js@*" data-semver="2.2.0+2" src="//cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/linq.js"></script>
    <script data-require="linq.js@*" data-semver="2.2.0+2" src="//cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/jquery.linq.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
  <input type="button" onclick="disableAnswering();" value="Stop"><input type="button" value="Continue" onclick="enableAnswering();">
    <img id="objFullScreenImage" src="#" class="FullScreen DisplayNone">
    <div id="objLoading" class="DisplayNone Loading">Loading!!!</div>
    <div id="objTeams" class="Teams DisplayNone">
      <label><input type="checkbox" id="objOnlyUnreviewedAnswers" checked="checked" value="only_unreviewed_answers">Only unreviewed questions (first refresh please)</label>
      <div id="objTeamTemplate" class="Team DisplayNone">
      </div>
      <div id="objAnswerTemplate" class="Answer DisplayNone">
        <div class="QuestionNumberAndText">number and text</div>
        <div class="AnswerText DisplayNone">answer</div>
        <div class="AnswerImage DisplayNone"><img /></div>
        <button class="Good DisplayNone">Goed</button><button class="Bad DisplayNone">Fout</button>
      </div>
    </div>
    <div id="objAnswersTemplate" class="Answers DisplayNone">
      <div id="objAnswerTemplate" class="Answer DisplayNone"></div>
    </div>
  </body>

</html>

var _strAdminCode = "qwerty";
$(document).ajaxStart(function() {
  $("#objLoading").removeClass("DisplayNone");
});

$(document).ajaxComplete(function() {
  $("#objLoading").addClass("DisplayNone");
});

$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
  alert(thrownError);
});

function getAllTeams() {
 
  ajax("teams", getAllTeamsCompleted, "GET", _strAdminCode, null);
}

function getAllTeamsCompleted(objTeams) {
 
  $("#objTeams").removeClass("DisplayNone");
  $.each(objTeams, function(i, v) {

    var objTeam = $("#objTeamTemplate").clone().appendTo($("#objTeams"));
    $(objTeam).attr("id", "objTeam_" + v.code);
    $(objTeam).removeClass("DisplayNone");
    $(objTeam).text("Team: " + v.name);
    $(objTeam).attr("data-team_code", v.code);
    $(objTeam).click(
      function(e) {
        if (e.target !== this)
          return;
        getAnswersOfTeam($(this).attr("data-team_code"));
      })
  });
}

function getAnswersOfTeam(strTeamCode) {

  var $objGetQuestions = ajax("questions", null, "GET", null, null);
  var $objGetAnswers = ajax("teams/" + strTeamCode + "/answers", null, "GET", null, "include_thumbnails=true");

  $.when($objGetQuestions, $objGetAnswers).done(function(objQuestions, objAnswers) {
    displayAnswersOfTeam(strTeamCode, objQuestions[0], objAnswers[0]);
  });
}

function displayAnswersOfTeam(strTeamCode, objQuestions, objAnswers) {

  $("#objTeam_" + strTeamCode + " > .Answer").remove();
  
  var blnDisplayAllAnswers = $("#objOnlyUnreviewedAnswers:checked").val() !== "only_unreviewed_answers";

  $.each(objAnswers, function(i, objAnswer) {
    
    var blnDisplayAnswer = blnDisplayAllAnswers || (objAnswer.state == "not_checked");

    if (blnDisplayAnswer) {

      var objQuestion = Enumerable.From(objQuestions).Where(function(x) {
        return x.number == objAnswer.number;
      }).Single();
      var intQuestionNumber = objQuestion.number;
      var $objAnswer = $("#objAnswerTemplate").clone().appendTo($("#objTeam_" + strTeamCode));
      $objAnswer.attr("id", "objAnswer_" + strTeamCode + "_" + intQuestionNumber);
      $objAnswer.removeClass("DisplayNone");
      $objAnswer.attr("data-team_code", strTeamCode);
      $objAnswer.attr("data-question_number", objQuestion.number);

      var strQuestionText = objQuestion.number + ". " + objQuestion.text;
      if (blnDisplayAllAnswers)
        strQuestionText += " (" + objAnswer.state + ")";
      $objAnswer.find(".QuestionNumberAndText").text(strQuestionText);

      var blnAtLeastOne = false;
      if (objAnswer.text !== null) {
        $objAnswer.find(".AnswerText").text(objAnswer.text).removeClass("DisplayNone");
        blnAtLeastOne = true;
      }

      if (objAnswer.base64_thumbnail !== null) {

        var $objImageContainer = $objAnswer.find(".AnswerImage").removeClass("DisplayNone");
        var $objImage = $objImageContainer.find("img");
        $objImage.attr("src", "data:image/png;base64, " + objAnswer.base64_thumbnail);
        $objImage.click(function() {
          // BUG: include_thumbnails must be true, to get the image
          ajax("teams/" + strTeamCode + "/answers/" + intQuestionNumber,
            function(objAnswer) {
              $("#objFullScreenImage").attr("src", "data:image/png;base64, " + objAnswer.base64_image).removeClass("DisplayNone").click(function() {
                $("#objFullScreenImage").attr("src", "#").addClass("DisplayNone");
              });

            }, "GET", null, "include_thumbnails=true&include_images=true");
        });
        blnAtLeastOne = true;
      }

      if (blnAtLeastOne && objAnswer.state !== "not_filled") {
        
        $objAnswer.find(".Good").removeClass("DisplayNone").click(function(e) {
          ajax("teams/" + strTeamCode + "/answers/" + intQuestionNumber + "/accept",
            function() {
              $objAnswer.remove();
            }, "POST", _strAdminCode,null);
          
        });

        $objAnswer.find(".Bad").removeClass("DisplayNone").click(function(e) {
          ajax("teams/" + strTeamCode + "/answers/" + intQuestionNumber + "/reject",
            function() {
              $objAnswer.remove();
            }, "POST",_strAdminCode,null);
        });
      }

    }
  });
}


function ajax(strURL, objCallback, strMethod, strAdminCode, strParameters) {
  strURL = "http://beta.iqualify.nl/Crazy88WebApi/" + strURL;
  if (strAdminCode !== null)
    strURL += "?admin_code=" + strAdminCode;
  if (strParameters !== null)
    strURL += "?" + strParameters;

  return $.ajax({
    method: strMethod === null ? "GET" : strMethod,
    url: strURL,
    contentType: "application/json",
    success: function(objResult) {
      if (objCallback)
        objCallback(objResult);
    }
  });
}

function disableAnswering()
{
      ajax("answers/disable", function(){alert("Answering questions by teams is disabled!!!");}, "PUT", _strAdminCode,null);
}

function enableAnswering()
{
      ajax("answers/enable", function(){alert("Answering questions by teams is enabled");}, "PUT", _strAdminCode,null);
}

$(document).ready(function() {

var objQuerystring = getUrlVars();
if (objQuerystring["admin_code"])
_strAdminCode = objQuerystring["admin_code"];
  getAllTeams();

});

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

/* Styles go here */

.DisplayNone
{
  display:none;
}

.Teams
{
  border: 1px solid black;
    padding: 5px;
}

.Team
{
  border: 1px solid black;
  padding: 5px;
  margin:5px;
  background:rgb(201, 242, 239);
}

.Answer
{
  border: 1px solid black;
  padding: 3px;
  margin:5px;
  background:#f1edc8;
}

.Loading
{
 position:absolute;
 top:0; 
 right:0;
 bottom:0;
 left: 0;
 background:white;
}

.FullScreen
{
 position:absolute;
 top:0; 
 right:0;
 bottom:0;
 left: 0;
 background:white;
}

button, input[type='button']
{
  height:30px;
  width:100px;
  font-weight:bold;
  margin:5px;
}
button.Good
{
  background-color:green;
}

button.Bad
{
  background-color:red;
}