如何像这样将表单数据序列化为json

Question

I am making a page where I have to make a quiz with some info, I have found in github a script that make that by entering the questions in json format here is the script:

Github Script

My problem is that I don't know how to generate the format that the script need to generate the quiz, here is an example of how the format has to be submitted:

{
"info": {
    "name":    "Test Your Knowledge!!",
    "main":    "<p>Think you're smart enough to be on Jeopardy? Find out with this super crazy knowledge quiz!</p>",
    "results": "<h5>Learn More</h5><p>Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus.</p>",
    "level1":  "Jeopardy Ready",
    "level2":  "Jeopardy Contender",
    "level3":  "Jeopardy Amateur",
    "level4":  "Jeopardy Newb",
    "level5":  "Stay in school, kid..." // no comma here
},
"questions": [
    { // Question 1 - Multiple Choice, Single True Answer
        "q": "What number is the letter A in the English alphabet?",
        "a": [
            {"option": "8",      "correct": false},
            {"option": "14",     "correct": false},
            {"option": "1",      "correct": true},
            {"option": "23",     "correct": false} // no comma here
        ],
        "correct": "<p><span>That's right!</span> The letter A is the first letter in the alphabet!</p>",
        "incorrect": "<p><span>Uhh no.</span> It's the first letter of the alphabet. Did you actually <em>go</em> to kindergarden?</p>" // no comma here
    },
    { // Question 2 - Multiple Choice, Multiple True Answers, Select Any
        "q": "Which of the following best represents your preferred breakfast?",
        "a": [
            {"option": "Bacon and eggs",               "correct": false},
            {"option": "Fruit, oatmeal, and yogurt",   "correct": true},
            {"option": "Leftover pizza",               "correct": false},
            {"option": "Eggs, fruit, toast, and milk", "correct": true} // no comma here
        ],
        "select_any": true,
        "correct": "<p><span>Nice!</span> Your cholestoral level is probably doing alright.</p>",
        "incorrect": "<p><span>Hmmm.</span> You might want to reconsider your options.</p>" // no comma here
    },
    { // Question 3 - Multiple Choice, Multiple True Answers, Select All
        "q": "Where are you right now? Select ALL that apply.",
        "a": [
            {"option": "Planet Earth",           "correct": true},
            {"option": "Pluto",                  "correct": false},
            {"option": "At a computing device",  "correct": true},
            {"option": "The Milky Way",          "correct": true} // no comma here
        ],
        "correct": "<p><span>Brilliant!</span> You're seriously a genius, (wo)man.</p>",
        "incorrect": "<p><span>Not Quite.</span> You're actually on Planet Earth, in The Milky Way, At a computer. But nice try.</p>" // no comma here
    },
    { // Question 4
        "q": "How many inches of rain does Michigan get on average per year?",
        "a": [
            {"option": "149",    "correct": false},
            {"option": "32",     "correct": true},
            {"option": "3",      "correct": false},
            {"option": "1291",   "correct": false} // no comma here
        ],
        "correct": "<p><span>Holy bananas!</span> I didn't actually expect you to know that! Correct!</p>",
        "incorrect": "<p><span>Fail.</span> Sorry. You lose. It actually rains approximately 32 inches a year in Michigan.</p>" // no comma here
    },
    { // Question 5
        "q": "Is Earth bigger than a basketball?",
        "a": [
            {"option": "Yes",    "correct": true},
            {"option": "No",     "correct": false} // no comma here
        ],
        "correct": "<p><span>Good Job!</span> You must be very observant!</p>",
        "incorrect": "<p><span>ERRRR!</span> What planet Earth are <em>you</em> living on?!?</p>" // no comma here
    } // no comma here
]
};

I was trying by making a form with php and get the info with arrays but i fail, and I think I have to use jQuery, but I don't know to much about jQuery, hope you could help me.

html form:

    <form method="post" action="anadirexamen.php">
  <div class="form-group">
    <label for="nombre">Nombre de Examen</label>
    <input type="text" class="form-control" name="nombre" id="nombre" placeholder="Nombre de Examen">
  </div>
<div class="form-group">
    <label for="descripcionexamen">Descripcion de Examen</label>
    <input type="text" class="form-control" name="descripcionexamen" id="descripcionexamen" placeholder="Pequeña descripcion de Examen">
  </div>

<div class="panel panel-default">
  <div class="panel-heading">Pregunta</div>
<div class="panel-body">
<div class="form-group">
    <label for="pregunta">Pregunta</label>
    <input type="text" class="form-control" name="pregunta[]" id="pregunta" placeholder="Pregunta">
  </div>

</div>
  <div class="panel-heading">Respuestas</div>
  <div class="panel-body">
<div class="form-group">
    <label for="respuestas">Respuesta 1</label>
    <input type="text" class="form-control" name="pregunta[][]" id="respuestas" placeholder="Respuesta 1">
  </div>
<div class="form-group">
    <label for="respuestas">Respuesta 2</label>
    <input type="text" class="form-control" name="pregunta[][]" id="respuestas" placeholder="Respuesta 2">
  </div>
<div class="form-group">
    <label for="respuestas">Respuesta 3</label>
    <input type="text" class="form-control" name="pregunta[][]" id="respuestas" placeholder="Respuesta 3">
  </div>
<div class="form-group">
    <label for="respuestas">Respuesta 4</label>
    <input type="text" class="form-control" name="pregunta[][]" id="respuestas" placeholder="Respuesta 4">
  </div>

</div>
</div>

<div class="form-group">
    <label for="mensajecorrecto">Mensaje Correcto</label>
    <input type="text" class="form-control" name="mensajecorrecto" id="mensajecorrecto" placeholder="Mensaje Correcto">
  </div>
<div class="form-group">
    <label for="mensajeincorrecto">Mensaje Incorrecto</label>
    <input type="text" class="form-control" name="mensajeincorrecto" id="mensajeincorrecto" placeholder="Mensaje Incorrecto">
  </div>


   <button type="submit" class="btn btn-default" name="anadir-examen">Submit</button>
</form>

PHP anadirexamen.php:

<?php
 session_start();

 if(isset($_POST['anadir-examen']))
 {
  $nombre = trim($_POST['nombre']);
  $descripcion = trim($_POST['descripcionexamen']);
 }

$arr = array(
    "info" => array(
        "name" => "$nombre",
        "main" => "$descripcion"
    )
);

echo json_encode($arr);

?>

i know how to make the format with static info using array in php, but i dont know how to make it with the form data, here is how i make it with static info using php arrays:

<?php
$arr = array(
    "info" => array(
        "name" => "The Quiz Header",
        "main" => "The Quiz Description Text"),
    "questions" =>array(
        array(
          "q" => "The Question?",

          "a" =>array(
      array(
         "option" => "an incorrect answer",
         "correct" => "false"),
       array(
         "option" => "a correct answer",
         "correct" => "true"),
        array(
         "option" => "an incorrect answer",
         "correct" => "false"),),

     "correct" => "The Correct Response Message",

     "incorrect" => "The Incorrect Response Message",

"select_any" => false,

"force_checkbox" => false),
    )
);

echo json_encode($arr);
?>

Answer 1

Looks like the values are not filled correctly in PHP. In your PHP code, use the following to assign values to arr:

$arr = array(
  "info" => array(
    "name" => $nombre,
    "main" => $descripcion
  )
);