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:
http://codepen.io/rodrix/pen/QpwvRX

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

Changes

  • 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 8 months 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 8 months 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 8 months 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 8 months ago
Another issue: on mobile if I deselect an item it stays yellow instead of going back to white.
georgefountain 8 months ago
I have updated the script, please check it out.
farolanf 8 months 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 8 months ago
What I mean is. On mobile, upon selecting the third answer it doesn't change to green
georgefountain 8 months ago
Ok, I added a brief delay before closing the main dialog so user get the third option feedback. Please check it out.
farolanf 8 months 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 8 months 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 8 months 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 8 months 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 8 months ago
Looks perfect! Thank you so much! Could you fix the padding issue on the previous bounty or is it already fixed?
georgefountain 8 months ago
I have fixed the padding on previous bounty. Please check it out.
farolanf 8 months ago
Thanks! Padding fixed. Just slight delay missing so green is visible on mobile for previous bounty. Thanks!
georgefountain 8 months ago
In case you missed it, I have added delay on the previous bounty.
farolanf 8 months ago
Amazing job! THANK YOU! :)
georgefountain 8 months 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 8 months ago