Javascript - Make boostrap modal survey code into a "library"
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Starting with this code: http://codepen.io/farolan/pen/ryazNd

Make it into a library that has the following signature:

survey.multipleChoiceQuestion(
options: [
    "mandatory": false /* if true, modal will be called like this to prevent closing when clicked or pressing esc: $('#myModal').modal({backdrop: 'static', keyboard: false, show: true}); else it willl be called like this  $('#myModal').modal({show: true}); */
    title: "Personalize your Holiday Trip",
    subtitle: [
        "What is your favorite Sport?"
        "What is your Second favorite Sport?",
        "What is your third favorite Sport?"
        ], /* If 3 subtitles are available, then the system should support selecting 3 answers. If 4 subtitles are available, it should support selecting 4 answers. */
    answers: [
        {
            caption: "Playing Golf",
            value: "golf"
        },
        {
            caption: "Going for a swim",
            value: "swimming"
        },
        {
            caption: "Playing a tennis match",
            value: "tennis"
        },
        {
            caption: "Doing Soccer",
            value: "soccer"
        }       /* answerValues array will hold the values (for database entry) , and answerCaptions will hold the captions (for user display) */
    ],  
    footer: "According to your interests we will prepare the best trip for you and your family",
    onSubmitCallbackMessage: function(answersValues, answerCaptions){ return "We saved your interests: " + answerCaptions.join(', ')}, /* This is a callback function used to generate the text that will appear on submit */,
    onSubmitCallbackAction:  function(answersValues, answerCaptions){ /* custom action */ }  /* This is the callback function that will be called after the questions are answered */
    ],
callbacks: [
    onSubmitCallbackAction: function(answersValues, answerCaptions){ /* custom action */ }  /* This is the callback function that will be called after the questions are answered. This as you can see is repeated. On purpose to allow an additional callback function outside the "options" array */
]
);

Sample usage without comments:

survey.multipleChoiceQuestion(
options: [
    "mandatory": true
    title: "Personalize your Holiday Trip",
    subtitle: [
        "What is your favorite Sport?"
        "What is your Second favorite Sport?",
        "What is your third favorite Sport?"
        ], 
    answers: [
        {
            caption: "Playing Golf",
            value: "golf"
        },
        {
            caption: "Going for a swim",
            value: "swimming"
        },
        {
            caption: "Playing a tennis match",
            value: "tennis"
        },
        {
            caption: "Doing Soccer",
            value: "soccer"
        }       
    ],  
    footer: "According to your interests we will prepare the best trip for you and your family",
    onSubmitCallbackMessage: function(answersValues, answerCaptions){ return "We saved your interests: " + answerCaptions.join(', '); },
    onSubmitCallbackAction:  function(answersValues, answerCaptions){ alert("Posting values via ajax to server" + answerValues.join(', ');} 
    ],
callbacks: [
        onSubmitCallbackAction: function(answersValues, answerCaptions){ alert("open a new survey question"); }  
]
);

The function should be chainable. Example:

var question1 = [ /* options */];
var question2 = [ /* options */];
var question3 = [ /* options */];

survey.multipleChoiceQuestion(
options: [ question1 ],
callbacks: [
    onSubmitCallbackAction: function(answersValues, answerCaptions){ 

        //Process data
        /* ... */

        //Set a condition. E.g: if(answerValues) == condition, and if so continue to next question.
                    survey.multipleChoiceQuestion(
            options: [ question2 ],
            callbacks: [
                onSubmitCallbackAction: function(answersValues, answerCaptions){ /* custom action */ }  /* This is the callback function that will be called */
            ]
        );
    }   
    ]
Do you have a better proposed interface interface that is flexible and is able to create 1) chainable surveys and 2) conditional actions (like depending on user answers, open another survey or not) ? Go ahead and feel free to propose it and post the function signature I will tell you if it meets requirements or not. Thanks
georgefountain 1 month ago
awarded to farolanf
Tags
javascript

Crowdsource coding tasks.

1 Solution

Winning solution

Here's my solution http://codepen.io/farolan/pen/WpxoYp

Changes

  • Removed HTML, only Javascript and CSS needed
  • Added abort option
  • Added dynamic questions example
  • Added 5, 3, and 1 questions examples
  • Can run multiple questions in a single call
Fantastic work! Some changes 1) Can you change class and selector "q1", "q2" to ".survey .question1" so that I have no problem with other code and classes? (a more specific selector and change "q" to "question". 2) Can you show an example where first a i) 5-question dialog shows then ii) a 3 question dialog and finally a iii) one question dialog shows (only one choice permitted, single answer)? 3) Remove the simulate net lag simulation between survey questions. We don't want to make the user wait for processing, they can work on the background and we can show next question instantly. 4) Keep the 3 second wait that is used as a confirmation, and make the 3 second a parameter option "confirmationDelay":3
georgefountain 1 month ago
5) You removed the duplicated callback which I added. I think it is useful. When you try adding multiple surveys in a row that are chained, I believe you will need it, so you can define the survey on one variable (options) and the logic and order of surveys in the other callback. This makes "options" re-usable. That's why I added a second duplicated callback. If you find a better way, go ahead. Thank you Farolanf. Great job!
georgefountain 1 month ago
For the last, I suggest this signature: Survey.multipleChoiceQuestion(options, callbackOnSubmit); This makes much more sense. In this way we can easily reutilize options for further dialogs and keep order and logic of surveys through 2nd parameter.
georgefountain 1 month ago
Updated. Please check it out. A 3s delay is used for separation of examples.
farolanf 1 month ago
Great job!!! 1) Rename run() to multipleChoiceQuestions() (with "s" at the end). In this way we will have multipleChoiceQuestion() and multipleChoiceQuestions() for multiple questions in a row. 2) On hover of last selected choice, background color does not change and checkmark does not deselect itself like in original version (previous bounty code). 3) Add a parameter to Survey.showMessage(message, autoCloseInSeconds) so that IF present it autocloses after "autoCloseInSeconds" seconds. If not present, it will not autoclose. 4) Can you add an example of a conditional survey whether surveyA or SurveyB appears depending on selected answer (on chain mode), to prove that arguments "answerValues, answerCaptions" are passed on chain mode and show this use case in action?
georgefountain 1 month ago
  • Add an option "None of the above" at the end of the answers which if clicked will prematurely end the survey. So if the user needs to select 5 destinations and he clicks on "None of the above" at the second answer, the survey should end there. This option should only be available from question 2 forward (including) (as it wouldn't make sense to include it on question 1 if not the user would answer nothing). It should only be available if options variable contains ==> abort: {enabled: true, caption: "None of the above"}. This means that the developer can personalize the text to something else: e.g: abort: {enabled: true, caption: "No, that's all I am interested in"}
georgefountain 1 month ago
  • I suggest removing all HTML code and making the js script create it on the fly, so just adding the css and js would make this script work. Is this possible?
georgefountain 1 month ago
Please check http://pastebin.com/jrGbxAXG for new project. I will post this on Bountify tonight, but before that, please confirm me that you think you can solve it. Thank you!
georgefountain 1 month ago
Updated, bug fixed, html removed. Please check it out.
farolanf 1 month ago
Impressive Farolanf. You have surpassed my expectations! Thank you so much for the amazing work.
georgefountain 1 month ago
What do you think about the new project that I will post tomorrow on Bountify? You think you can solve it?Here are the specs: http://pastebin.com/jrGbxAXG. Thank you!
georgefountain 1 month ago
I have read the specs, and that looks like a fun project, and a big one, for me. But the fact is, currently I can't solve complex drag and drop which the project will likely have. Here's my current simple drag n drop experiment http://codepen.io/farolan/pen/bqwXgM. I'm yet to learn stacked drop targets, and handling drag events bubbling, what I'm saying is, I'm afraid I can't meet the project deadline.
farolanf 1 month ago
HI Farolanf! Great to hear back from you about this! :) Let me do some research.. maybe I can find us a library for helping us code the drag and drop logic. What do you think about the rest?
georgefountain 1 month ago
Check this out : http://www.innovastudio.com/contentbox.aspx. Very similar to what I am trying to create. Maybe we can just use this library? What so you think? Looks open source- EDIT: My mistake. Not open source. But similar to what we want to create - yes.
georgefountain 1 month ago
I can do the REST, API, front-end coding, and handle the back-end. I might have problems with designing a neat UI, and complex software architecture. That's all I can think of for now, but there might be more comes up while developing, I can't tell as I'm lack experience on this.
farolanf 1 month ago
Hi Farolanf, sounds good enough for me :). I am thinking we should do all the backend and frontend in js, unless you want to add in php/ajax, which will be fine for me too. Tomorrow I will post the project so you may get started already. The bounty will start at $25 but I will increase it to $50 if I see enough progress. And even later, I will add more specifications and post it accross multiple bounties for additional rewards. I really look forward you working on this, from what I have seen in the previous bounties, you could do a fantastic job!
georgefountain 1 month ago
Js is fine for both ends. It's great that the project is divided into small tasks and posted as bounties, so if I can't do it, others will. I'm looking forward to work on it.
farolanf 1 month ago
Fantastic! Do you advise me to split current specifications into two bounties? If you explain better, I might be able to separate the complex drag and drop into a differnet bounty. Maybe it's not necessary, so just let me know.
georgefountain 1 month ago
What I am proposing is, if you would like me to split the current project specifications into two bounties I can do that. If so, please provide a suggestion. Else I can post it as I showed you. Let me know!
georgefountain 1 month ago
I thought it have been split already, and the $25-$50 bounty is just a small part of it, never mind then. As for splitting the project to tasks, I don't have suggestions as I don't know the application architecture for this project at the functions and components level.
farolanf 1 month ago
Yes, the specifications are just a small part of the bigger project. I was asking if you thought I should split this first task. But never mind I will post it as it is and then once solved I will post the next requirements just like I did with this one. :) Difference is, this project will be lenghtier and really interesting :) You may start working on it. Thank you farolanf!
georgefountain 1 month ago
Farolanf have you started working on the new bounty (live editor)? I wish to increase it to $50, but I need confirmation that you can finish. I can also wait a few more days before increasing it to $50. Let me know. Thank you!
georgefountain 1 month ago
Farolanf any update on the live editor bounty? I can increase the budget. Let me know. THanks
georgefountain 1 month ago
Farolanf, could you please translate this css code into "old code" that works on any browser: .can-hover .survey-answer.active:not(.active-grey):not(.last-active):hover .survey-icon {}. Thank you!
georgefountain 1 month ago
I have sent you an email via Bountify contact form. Check your spam folder! Thanks
georgefountain 1 month ago