Adding custom JS and changing it to suit Wix Corvid.

Ask the community
,
1

There is a lot of code but I know you cannot use query selectors and need to use $w.
I have also figured out that I need to make functions.
I dont know JS enough to change it to suit wix please can somebody give me some advice.

This code is to make a quiz that gives a total score.
https://www.youtube.com/watch?v=f4fB9Xg2JEY thanks to Brian I could get the code.

const question = document.querySelector('#question');
const choices = Array.from(document.querySelectorAll('.choice-text'));
const progressText = document.querySelector('#progressText');
const scoreText = document.querySelector('#score');
const progressBarFull = document.querySelector('#progressBarFull');

let currentQuestion = {}
let acceptingAnswers = true
let score = 0
let questionCounter = 0
let availableQuestions = []

let questions = [
    {
 question: 'What is 2+2?',
 choice1: '2',
 choice2: '4',
 choice3: '6',
 choice4: '8',
 answer: 2,
    },
    {
 question: 'An object is positively charged if it has more …',
 choice1: 'electrons than protons',
 choice2: 'electrons than neutrons.',
 choice3: 'protons than electrons.',
 choice4: 'protons than neutrons.',
 answer: 3,
    },
    {
 question: 'The UNIT in which the rate of flow of charge is measured, is called …',
 choice1: 'ampere.',
 choice2: 'coulomb.',
 choice3: 'volt.',
 choice4: 'watt.',
 answer: 1,
    },
    {
 question: 'The gradient of a velocity versus time graph is equivalent to the …',
 choice1: 'acceleration.',
 choice2: 'displacement.',
 choice3: 'position.',
 choice4: 'total distance covered.',
 answer: 1,
    },
    {
 question: 'Two cyclists are cycling in opposite directions along the side line of a rectangular field. It is observed that they covered the same distance over a time interval of 3 s. Which ONE of the following physical quantities is the SAME regarding the cyclists over the interval of 3 s?',
 choice1: 'Acceleration',
 choice2: 'Average speed',
 choice3: 'Average velocity',
 choice4: 'Displacement',
 answer: 2,
    },
]

const SCORE_POINTS = 100
const MAX_QUESTIONS = 5

startGame = () => {
 questionCounter = 0
 score = 0
 availableQuestions = [...questions]
 getNewQuestion()
}

getNewQuestion = () => {
 if(availableQuestions.length === 0 || questionCounter > MAX_QUESTIONS) {
 localStorage.setItem('mostRecentScore', score)

 return window.location.assign('/end.html')
    }

 questionCounter++
 progressText.innerText = `Question ${questionCounter} of ${MAX_QUESTIONS}`
 progressBarFull.style.width = `${(questionCounter/MAX_QUESTIONS) * 100}%`

 const questionsIndex = Math.floor(Math.random() * availableQuestions.length)
 currentQuestion = availableQuestions[questionsIndex]
 question.innerText = currentQuestion.question

 choices.forEach(choice => {
 const number = choice.dataset['number']
 choice.innerText = currentQuestion['choice' + number]
    })
 availableQuestions.splice(questionsIndex, 1)

 acceptingAnswers = true
}

choices.forEach(choice => {
 choice.addEventListener('click', e=> {
 if(!acceptingAnswers) return

 acceptingAnswers = false
 const selectedChoice = e.target
 const selectedAnswer = selectedChoice.dataset['number']

 let classToApply = selectedAnswer == currentQuestion.answer ? 'correct' :'incorrect'

 if(classToApply === 'correct') {
 incrementScore(SCORE_POINTS)
        }

 selectedChoice.parentElement.classList.add(classToApply)

 setTimeout(() => {
 selectedChoice.parentElement.classList.remove(classToApply)
 getNewQuestion()
        }, 1000)
    })
})

incrementScore = num => {
 score += num
 scoreText.innerText = score
}

startGame()
2

You don’t expect that we will “translate” the entire code for you. Right?

3

Hey J. D. thanks for answering, no dont worry about translating everything I just need certain parts.

Instead of using the js to make the questions and answers can I not use a wix database?
Also if the answer is incorrect how do I change the color?
When this runs it is supposed to change the text of the html button but I dont know if Wix allows the text to change?

4

You can store the questions in the databse.
Everything in the code you posted can be easily converted into corvid. Just have a loo at the documentation. especially here:
https://www.wix.com/corvid/reference/$w/text

You can also create a repeater for the questions:
https://www.wix.com/corvid/reference/$w/repeater

To change text color, see :
https://www.wix.com/corvid/reference/$w/style/color

5

Thank you and what if I wanted to keep the information that the user submits?

Almost like a submission form?