Jquery Bootstrap - Bootstrap Modal Dialog + Multiple Choice Step Survey
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Simple task.

Starting from this code:

I need you to make this into a multiple Choice/Step survey that works like this:

  • Step 1) Header will say "What is your favorite Sport?"
    The progress indicator (".survey-progress div") should have a width of 33%
    User will be able to select one item by clicking which will become green.
    After selecting it user will arrive to....

  • Step 2) Header will change to "What is your Second favorite Sport?"
    The progress indicator (".survey-progress div") should have a width of 66%
    User may deselect previous item by clicking on it, and if so he will return to step 1.
    On hover on selected item, item should show without the green checkmark, and upon click become deselected. Use clear hover indicators to make this user friendly.
    User will be able to select another item which will become green, and if he does he will continue to...

  • Step 3) Header will change to "And if you have to pick a third favorite sport?"
    The progress indicator (".survey-progress div") should have a width of 100%
    The first item selected will become grey (user will not be able to deselect it), and if clicked it should get a "shake" animation informing user that he cannot deselect it.
    However, user may deselect previous item entered on step 2 by clicking on it, and if so he will return to step 2.
    User will be able to select another item which will become green and if so he will finish the survey.

  • Post logic)

  • After the survey is finished the answers entered on step 1, step 2, and step 3 should be passed in a POST, in order.
    Update the POST code accordinly.

  • Success message should be changed and say "We saved your interests: [choice 1], [choice 2], [choice 3]"

  • Ensure it works correctly on mobile.
    That's it!

awarded to farolanf

Crowdsource coding tasks.

1 Solution

Please check out this solution http://codepen.io/farolan/pen/ryazNd


  • Decrease padding on survey-footer
  • Fixed hover on selected choice
  • Grey the check icon on invalid choice
  • Fixed hover on touch enabled devices
  • Glow red for invalid choice
  • Fixed hover on selected choice
  • Fixed excess paddings on survey-footer
Thanks farolanf! 1) when trying to unselect a non valid choice, only the choice should shake, not the whole dialog. And it should glow red and then get back to normal color 2) in mobile it is not working as expected. Upon selecting the first choice it does not get a green check mark. Please check mobile. Thanks
georgefountain 26 days ago
3) Please use a different background for "selected" than "on hover" (when the choice has been confirmed by a click). Change the yellow background to #ccfbbc. Thanks
georgefountain 25 days ago
4) there is also a padding issue on the modal footer. Seems to be too big as it looks awkward on Mobile. Please check this and fit on previous survey bounty if necessary. Thanks!
georgefountain 25 days ago
Thanks Farolanf! It's looking much better! For the greyed option, can you grey also the checkmark? (so the checkmark also looks greyed out. Use a darker grey)
georgefountain 25 days ago
Another issue: on mobile if I deselect an item it stays yellow instead of going back to white.
georgefountain 25 days ago
I have updated the script, please check it out.
farolanf 25 days ago
Fantastic! Looks great. One last thing. On mobile the third option Nevers gets colored green. I know it's just a few ms but can it be fixed? Thanks
georgefountain 24 days ago
What I mean is. On mobile, upon selecting the third answer it doesn't change to green
georgefountain 24 days ago
Ok, I added a brief delay before closing the main dialog so user get the third option feedback. Please check it out.
farolanf 24 days ago
Thank you Farolanf! It's looking good. 1) For consistency, can you make the second choice become grey (like the first one) once the third option has been picked? 2) There now seems to be a bug, I cannot deselect any choice ("Uncaught ReferenceError: liAnswer is not defined") 3) Upon hover of a selected option, the checkmark dissapears (expected), but the background is still green. Can you make it yellow on hover of a selected choice (before clicking to deselect)? ( I think it would make more sense for best user experience). Thanks a lot you have done a fastastic job!
georgefountain 24 days ago
I got no idea why, but now I cannot reproduce bug number 2 (maybe it was an error of code pen?). So if you cannot reproduce it either, just solve 1 and 3. Thanks!
georgefountain 24 days ago
By the way, to thank you for all your effort, I have given you an extra tip. Once you finish I will also award bounty :). Please kindly also make the same bug changes (like padding fix) on previous (already solved) bounty. Thanks!
georgefountain 24 days ago
Updated. What seems to be a bug is caused by we are viewing and editing at the same time, ie. you're viewing the incomplete script that I'm still working on.
farolanf 24 days ago
Looks perfect! Thank you so much! Could you fix the padding issue on the previous bounty or is it already fixed?
georgefountain 23 days ago
I have fixed the padding on previous bounty. Please check it out.
farolanf 23 days ago
Thanks! Padding fixed. Just slight delay missing so green is visible on mobile for previous bounty. Thanks!
georgefountain 22 days ago
In case you missed it, I have added delay on the previous bounty.
farolanf 21 days ago
Amazing job! THANK YOU! :)
georgefountain 19 days ago
Farolanf, this is for you: https://bountify.co/javascript-make-boostrap-modal-survey-code-into-a-library . I need you to parametrize everything you did and turn it into a javascript library. Hopefully you can solve it! Thank you :)
georgefountain 19 days ago