Is there a way to take user input from a form and append it to code I already have?-CodePudding

I have html and css code for a basic quiz template. I want to give the user the ability to make their own custom quiz.

Example: I have created my own math quizzes, science quizzes, etc, that the user can take. I am looking for the ability that Users can make their own personal quiz.

CodePudding user response：

You don't append users input to your code. You should have your quiz as a data and let the user update the data by adding their quiz.

CodePudding user response：

The structure of a form looks like this:

<form method = 'post' action='./handleSubmission/'>

    <label>Question 1: </label>
    <input type='text' class='question' name='question1'>
    
    <label>Answer 1: </label>
    <input type='text' class='answer' name='answer2'>

    <label>Question 2: </label>
    <input type='text' class='question' name='question2'>
    
    <label>Answer 2: </label>
    <input type='text' class='answer' name='answer2'>

    <button>Submit</button>
</form>

(You can find all the different input types here. You might want another type for multiple choice questions.

When the user clicks on submit, the default behaviour is that the content of the form will be sent as an http request to the action url. if you set post as method, the method will be POST. If you set get as method, the method will be GET.

Now, in order to do something useful with it, there needs to be a server-side script at './handleSubmission/' or whatever url you put in here, that can read the sent data and upload it to some place where you store the data for your quizzes. This can be either a database or a repository containing some files. I'd go for json files. Because json files can very easily be decoded and used in any web scripting language.

In PHP for example you'd get the content of the form through a special array called $_GET (or $_POST depending on the method). You'd then have access to 'question1' with $_GET['question1']. You'd then have to find a way to put that data into a json file.

To use the content of the json files, you can either use a backend script or a frontend script like javascript.

Are you already using a scripting language for the backend such as PHP or Python? Or do you focus on frontend?

If you want to focus on javascript and frontend, this is the alternative:

<form>
   //...
   <button id='btn-submit'>Submit</button>
</form>

As you can see, i ommited action and method because in this alternative we don't want to send the form to the server. What we'll do is, when the button is clicked, we'll capture the content of the form without refreshing the page, and then send it a Backend-as-a-service like Google Firebase.

const submitButton = document.querySelector('#btn-submit');
submitButton.addEventListener('click', (e) => {
    /* important! prevents the default behaviour which is to submit the form */
    e.preventDefault();

    const data = [];
    /* do stuff here to retrieve the data from form like: */
    const questionInputs = document.querySelector('.question');
    const answerInputs = document.querySelector('.answer');
    
    for(let key in questionInputs){
        data[key] = {
            question: questionInputs[key].value;
            answer: answerInputs[key].value;
        }
    }
    
    sendToFirebase(data);
});

You'd then have to write the sendToFirebase function.

Firebase requires making an account, starting a project by giving a name etc. Then it gives you the code to put in your app and you can read the documentation about how to upload data to the Realtime Database.

I strongly prefer the first option however. Because i think in this case the Firebase Realtime Database would be a bit cumbersome to use compared to just setting up a small backend script that generates json files.