Demo of Multiple Bootbox.prompt

Here, bootbox.prompt is used multple times to gether multiple survey questions and display result

by Budhram Gurung

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.2.0/bootbox.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<button id='start_survey' class='btn btn-success'>Start Survery</button>
<div class='survey_panel hide'>
     <h3>Survey Results</h3>

    <hr>
    <ol id='survey_results'></ol>
</div>

JavaScript

$(document).ready(function () {
    $('#start_survey').on('click', function () {
        var survey_question, survey_questions, survey_answers = {};

        survey_questions = {
            name: 'What is your name?',
            age: 'How old are you (in number only)?',
            color: 'What is your favourite color?',
            movie: 'What is your favourite movie?'
        };

        function displaySurveyResults(responses) {
            var survey_results_div = $('#survey_results');

            survey_results_div.html('');
            _.each(responses, function (value, key) {
                survey_results_div.append('<li><strong>' + key + '</strong>: ' + value + '</li>');
            });
            $('.survey_panel').removeClass('hide');
            $('#start_survey').addClass('hide');
        }

        function showPrompt(variable, callback) {
            var f = _.partial(callback, _.keys(variable)[0]);
            bootbox.prompt(_.values(variable)[0], f);
        }

        function getFirstPrompt() {
            var first_key, first_prompt = {};
            first_key = _.first(_.keys(survey_questions));

            if (first_key) {
                first_prompt[first_key] = survey_questions[first_key];
                delete survey_questions[first_key];
            }
            return first_prompt;
        }

        function promptCallback(variable_name, value) {
            var next_survey_question;
            survey_answers[variable_name] = value;

            next_survey_question = getFirstPrompt();
            if (next_survey_question && !_.isEmpty(next_survey_question)) {
                showPrompt(next_survey_question, promptCallback);
            } else {
                displaySurveyResults(survey_answers);
            }
        }

        survey_question = getFirstPrompt();
        if (survey_question && !_.isEmpty(survey_question)) {
            showPrompt(survey_question, promptCallback);
        } else {
           ...