function renderFeatureQuestion(q) {
    var newHtml = "<div id=\"question-" + q.id + "\" data-ref=\"" + q.id + "\" class=\"question feature\">";

    newHtml += "<div class=\"question-text range5-question-text\">";
    newHtml += escapeHtml(replacePlaceholders(q.text, q));
    newHtml += checkAddSubText(q);
    newHtml += "</div>";

    newHtml += "<div class=\"question-range\">";
    newHtml += "<div class=\"range star5\">";

    if(getString("feature_range_negative").length>0 && getString("feature_range_positive").length>0) {
      newHtml += "<div class=\"range-header-flex\"><div class=\"range-header\"><span class=\"range-header-from\">" + getString("feature_range_negative") + "</span><span class=\"range-header-to\">" + getString("feature_range_positive") + "</span></div></div>";
    }

    newHtml += "<div class=\"range-options range5-options star5-options\">";
    newHtml += "<span class=\"range5-num star5-num\" data-ref=\"1\"></span>";
    newHtml += "<span class=\"range5-num star5-num\" data-ref=\"2\"></span>";
    newHtml += "<span class=\"range5-num star5-num\" data-ref=\"3\"></span>";
    newHtml += "<span class=\"range5-num star5-num\" data-ref=\"4\"></span>";
    newHtml += "<span class=\"range5-num star5-num\" data-ref=\"5\"></span>";
    newHtml += "</div></div>";

    if(q.pictureSeen!=null && q.pictureSeen==false) {
      if(IS_NPS) {
        newHtml += "<div class=\"question-controls\"><div class=\"question-skip\"><a href=\"#\">" + getString("feature_skip") + "</a></div></div>";
      }
      else {
        newHtml += "<div class=\"question-controls\"><div class=\"question-skip\"><a href=\"#\">" + getString("feature_notseen") + "</a></div></div>";
      }
    }

    newHtml += "</div>";
    newHtml += "</div>";

    $("#panel").append(newHtml);
}

function renderTrailerQuestion(q) {
  var newHtml = "<div id=\"question-" + q.id + "\" data-ref=\"" + q.id + "\" class=\"question trailer\">";

  newHtml += "<div class=\"question-text\">";
  newHtml += escapeHtml(replacePlaceholders(q.text, q));
  newHtml += checkAddSubText(q);
  newHtml += "</div>";

  if(q.trailerUrl!=null) {
      newHtml += "<div class=\"question-video\"></div>";
  }

  newHtml += "<div class=\"range rating5\">";

  if(getString("trailer_range_negative").length>0 && getString("trailer_range_positive").length>0) {
    newHtml += "<div class=\"range-header-flex\"><div class=\"range-header\"><span class=\"range-header-from\">" + getString("trailer_range_negative") + "</span><span class=\"range-header-to\">" + getString("trailer_range_positive") + "</span></div></div>";
  }

  newHtml += "<div class=\"range-options range5-options rating5-options\">";
  newHtml += "<span class=\"range5-num rating5-num\" data-ref=\"1\"></span>";
  newHtml += "<span class=\"range5-num rating5-num\" data-ref=\"2\"></span>";
  newHtml += "<span class=\"range5-num rating5-num\" data-ref=\"3\"></span>";
  newHtml += "<span class=\"range5-num rating5-num\" data-ref=\"4\"></span>";
  newHtml += "<span class=\"range5-num rating5-num\" data-ref=\"5\"></span>";
  newHtml += "</div></div></div>";

  $("#panel").append(newHtml);
}


function initFeatureQuestion() {

    // console.log(activeQuestionIndex);
    // console.log(activeQuestions[activeQuestionIndex]);

    if(activeQuestions[activeQuestionIndex].pictureUrl!=null && activeQuestions[activeQuestionIndex].pictureUrl.length>0) {
        $("#wrapper-overlay").css("background-image", "url('" + activeQuestions[activeQuestionIndex].pictureUrl + "')");
        $("#wrapper-overlay").css("display","block");
    }
    else if(activeQuestionObject.performance!=null && activeQuestionObject.performance.posterUrl!=null) {
        $("#wrapper-overlay").css("background-image", "url('" + activeQuestionObject.performance.posterUrl + "')");
        $("#wrapper-overlay").css("display","block");
    }

    activeAnswerId = -1;
    if(activeQuestions[activeQuestionIndex].userAnswerText!=null) {
        activeAnswerId = parseInt(activeQuestions[activeQuestionIndex].userAnswerText);
    }

    initOptions();

    if($("#question-" + questionIds[activeQuestionIndex] + " .question-skip")!=null) {
      $("#question-" + questionIds[activeQuestionIndex] + " .question-skip a").unbind("click");

      $("#question-" + questionIds[activeQuestionIndex] + " .question-skip a").click(function (e) {
        e.preventDefault();
        if (busy) return;

        busy = true;
        setTimeout(showNextQuestion, 500);
      });
    }
}

function initTrailerQuestion() {
    //console.log(activeQuestions[activeQuestionIndex]);

    if(activeQuestions[activeQuestionIndex].pictureUrl!=null && activeQuestions[activeQuestionIndex].pictureUrl.length>0) {
        $("#wrapper-overlay").css("background-image", "url('" + activeQuestions[activeQuestionIndex].pictureUrl + "')");
        $("#wrapper-overlay").css("display","block");
    }

    if(activeQuestions[activeQuestionIndex].trailerUrl!=null) {
      if($("#question-" + questionIds[activeQuestionIndex] + " .question-video").length>0) {
        $("#question-" + questionIds[activeQuestionIndex] + " .question-video").html("<iframe src=\"" + activeQuestions[activeQuestionIndex].trailerUrl + "\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>");
      }
    }
  
    activeAnswerId = -1;
    if(activeQuestions[activeQuestionIndex].userAnswerText!=null) {
        activeAnswerId = parseInt(activeQuestions[activeQuestionIndex].userAnswerText);
    }

    initOptions();
}