Как совместить имя пользователя в Django db и переменную score в JavaScript? - PullRequest
0 голосов
/ 29 мая 2020

Здесь я разрабатываю тест, используя Django и JavaScript, весь мой лог c находится под JavaScript, поэтому мне нужно подключить имя пользователя и счет для сохранения данных в базе данных Django.

У меня есть переменная оценки в JavaScript.

У меня есть имя пользователя в Django базе данных

Как объединить эти два в одно представление и отправить в Django База данных.

/*ajax call*/

var questions = [];
  $.ajax({
    url: 'http://127.0.0.1:8000/api2/?format=json',
    type:'GET',
    async:true,
    dataType: "json",
    success: function(data)
     {
        questions = data ;
        loadQuestion();

     }
});



//Displaying questions
  var currentQuestion = 0;
  var score = 0;
  var totQuestions = 8;
  var AnswerOption = null;

  function loadQuestion() 
  {


    resetColor();
    enableAll();
    //questionIndex = 0
    var questionEl = document.getElementById("question");
    var opt1 = document.getElementById("opt1");
    var opt2 = document.getElementById("opt2");
    var opt3 = document.getElementById("opt3");
    var opt4 = document.getElementById("opt4");

    questionEl.innerHTML = (currentQuestion + 1) + '. ' + questions[currentQuestion].question;
    opt1.innerHTML = questions[currentQuestion].option1;
    opt2.innerHTML = questions[currentQuestion].option2;
    opt3.innerHTML = questions[currentQuestion].option3;
    opt4.innerHTML = questions[currentQuestion].option4;

    if(1 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt1;
    if(2 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt2;
    if(3 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt3;
    if(4 == parseInt(questions[currentQuestion].answer)) AnswerOption = opt4;
  } 

  //Loading next question
  function loadNextQuestion() {
    resetColor();
    enableAll();
    var selectedOption = document.querySelector('input[type=radio]:checked');
    if (!selectedOption) {
      alert('Please select your answer!');
      return;
    }
    var answer = selectedOption.value;
    if (questions[currentQuestion].answer == answer) {
      score += 10;
    }

    selectedOption.checked = false;
    currentQuestion++;

    var nextButton = document.getElementById('nextButton');
    if (currentQuestion == totQuestions - 1) {
      nextButton.innerHTML = 'Finish';
    }



    var container = document.getElementById('quizContainer');
    var resultCont = document.getElementById('result');
    var timeCont = document.getElementById('counter');
    var statusCont = document.getElementById('status');
    var homeCont = document.getElementById('home');
    if (currentQuestion == totQuestions) {
      container.style.display = 'none';
      resultCont.style.display = '';
      timeCont.style.display='';
      statusCont.style.display='';
      homeCont.style.display='';


      localStorage.setItem('scores',score)
      var scoress = localStorage.getItem('scores')

      if(score == 0 || score < 40)
      {
          resultCont.innerHTML = "<h1>Your Score:- "+ score +" /80</h1>" ;
          timeCont.innerHTML = 'Time taken :' + 'Min:' + minutesLabel.textContent + ':'  + 'Sec:' + secondsLabel.textContent ;
          statusCont.innerHTML = "Status: FAIL";
          homeCont.innerHTML="<form action='/'><button type='submit' onclick = 'scoresubmit();'>Click Here</button></form> ";
        }

      else {
        resultCont.innerHTML = 'Your Score:- ' + score + '/80' ;
          timeCont.innerHTML = 'Time taken :' + 'Min:' + minutesLabel.textContent + ':'  + 'Sec:' + secondsLabel.textContent ;
          statusCont.innerHTML = "Status: PASS";
          homeCont.innerHTML="<form action='/'><button type='submit' onclick = 'scoresubmit();'>Click Here</button></form> ";
        }


      return;
    }


    loadQuestion(currentQuestion);
  }



  //checking answers
  function check() {
    resetColor();
    var selectedOption = document.querySelector('input[type=radio]:checked');
    if (selectedOption == AnswerOption) {
      selectedOption.parentNode.style.backgroundColor = "green";
      nextButton.innerHTML = 'Next';

    } else {
      selectedOption.parentNode.style.backgroundColor = "red";
      AnswerOption.parentNode.style.backgroundColor = "green";
      nextButton.style.backgroundColor = "white";
      nextButton.innerHTML = 'Next';

    }
    disableAll();
  }

  //bg color disabled for each option after the next button clicked
  function disableAll(){
    let options = document.querySelectorAll("input[type=radio]");
    for(let i = 0; i < options.length; ++i){
      options[i].setAttribute("disabled","true");
    }
  }


  function enableAll(){
    let options = document.querySelectorAll("input[type=radio]");
    for(let i = 0; i < options.length; ++i){
      options[i].removeAttribute("disabled");
    }
  }

  //reset color and next button
  function resetColor(){
    let options = document.querySelectorAll("input[type=radio]");
    for(let i = 0; i < options.length; ++i){
      options[i].parentNode.style.background = "none";
      nextButton.style.background = "none";
      nextButton.innerHTML = '';


    }
  }


  loadQuestion(currentQuestion);

// var id_score = document.getElementById('id_score');
//   function scoresubmit(){
//   $.ajax({
//     url: '/',
//     method : 'POST',
//     data: {score: $('#result').val(), "csrfmiddlewaretoken" : "{{csrf_token}}"},
//     success: function(data) {

//       $('#id_score').html(data.parentNode);
//       console.log(data.score.value);
//     }
//      });

//     }


    function scoresubmit(){
      $.ajax({
        url: "...Here wat i need to put",
        method : 'POST',
        data: {
          score: $('#result').val(), 
          "csrfmiddlewaretoken" : "{{csrf_token}}"
        },
        success: function() {
          $('#id_score').html(score);
        }
         });
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...