Branching Description Wizard in Bootstrap

This should be a quick and easy project for those who understand JQuery and Bootstrap. We have a custom coded website based on Bootstrap 3. In our forms, we need user to enter some descriptions. For that we use Summernote as WYSIWYG control. Now we want to add a wizard to assist users to make those descriptions. This wizard script must be written in jQuery and uses standard Bootstrap markups. There will be a button on top of Summernote control. That button will launch the wizard as a bootstrap modal dialog. At the end of the wizard, it must replace the content of the Summernote control with the generated text based on user choices. This wizard is basically a branching multiple choices. And next page of the wizard is determined by the choice taken in current page. Each page can be: a) a question with multiple choices (radioboxes) with a possibility to add custom answer (other option). b) a question with multiple checkboxes, user can select more than one choices. c) a question with multiple line text answer. We must be able to modify the questions and choices easily. JSON is the preferred format, but feel free to propose your idea. Something like this: { "question": "What is your favorite pet?", "generated": "My favorite pet is %s. ", "type": "radio", "choices: { "1": "Cat", "2": "Dog", "3": "Iguana" "4": "custom" }, "branches": { "1": { "question": "What kind of cat?", "generated": "Especially %s cat.", "type": "radio", "choices": { "1": "persian", "2": "stray", "3": "pluffy" } }, "2": { .... }, "3": { .... }, "4": { .... } } } At the end of the execution, it will generate something like: "My favorite pet is cat. Especially stray cat." and assign it to the content of Summernote control. If you have questions, let me know. Ask me in one big or two paragraph, so I can copy-paste your question to my friend who ask me post this project. I will get his answer and get back to you.