need advice with passing a javascript value into html format so i can show a grade screen of correct answers instead of 'document.write'

Question

below is the code for the check function that will store the value of the 'c' variable and the document.write will display it in a empty page. i have been trying to find a way to pass this into my html so i can create a grading screen and display the same line i have here into a html format but i cannot get the function or variable to pass through however i try.

function check() {
  let c=0
  const q1=document.quiz.question1.value
  const q2=document.quiz.question2.value
  const q3=document.quiz.question3.value
  const q4=document.quiz.question4.value
  const q5=document.quiz.question5.value
  if(q1==='1') {
    c++
  }
  if(q2==='1') {
    c++
  }
  if(q3==='1') {
    c++
  }
  if(q4==='1') {
    c++
  }
  if(q5==='1') {
    c++
  }
  document.write('You scored ' + c + ' 
and your average was ' + c/10*100 + '%')
}

below is the html code i tried but i don't understand how to export the function parameters


     Welcome

i know that this may not be part of the question or may be an additional step, but would it be easier to store that c value into a database and then pull from the database into the html code? i need to be able to store that score along with a name into a database anyways so maybe it would be easier to populate the database with the values and then take them out of there with a select query or handlebar tag (as i have a index.handlebar that i will be displaying the scores on with other data). sorry for the long question but i've been struggling with the database side so need to quickly solve these issues. Any help is greatly appreciated :)

Sorry for the long amounts of code but i wasn't sure what you needed to undertand what im trying to do. The code below saves the value within the radio button and the variable c auto-increments +1 and then the function at the bottom called "check3()" runs the increment for every value and then it runs the calculation. what i want to do is display that same statement calculation in the same page if needed but it will need to have the same css as the page of the current page.

  
    
      
      
        {{this.Question1}}               
        
        Emacs

        
        Notepad++

        
        Vim

        
      Bash


        
    

    
    
        {{this.Question2}}
        
        Nothing

        
        
          Java Development Kit 1.8 or newer

        
        Apache Maven

        
        
          Jakarta Enterprise Edition web profile compliant server



        
        
    



    
    
        {{this.Question3}}
        
        username and IP address

        
        username and password

        
        email address and password

        
        username and email address


        
        
    

    
    
        {{this.Question4}}
        
        System

        
        Local

        
        User

        
        Global


        
        
    

    
    
        {{this.Question5}}
        
        Junio C. Hamano

        
        James Gosling

        
        Linus Torvalds

        
        Kohsuke Kawaguchi
 

      
        
      
        

      
    
    {{/each}}

user_12351934 · Answer

It sounds like you want to take the document.write and display that on the screen.

function myFunction() {
//Create the HTML ELEMENT 
const msgDiv = document.createElement('h1');

// create the message you want to display
 msgDiv.innerHTML = `$ You scored {c} and you average was {c/10*100}%$`;

// Display that message by appending it to an HTML element

 yourHTMLELEMENTWHEREYOUWANTITTODISPLAY.appendChild(msgDiv);

}

//call the function 
myFunction()

//add an eventlistener on function
button.addEventListener('click', myFunction)


You have your quiz wrapped in a form, so you can just add an add event listener on that element. That way when the quiz is at the end and when someone hits submit the other function to display the results can run. Also you want to have the form submit so that they can either click or hit enter so submit. 




 form.addEventListener('submit' (e) => {
   // this stops the page from submitting and going to another page
   e.preventDefault();
   // Add the code from up above. 
   // You don't want your check function to be in this code because it will only run when the form is submitted and you don't want that.
})

need advice with passing a javascript value into html format so i can show a grade screen of correct answers instead of 'document.write'

1 Answers