Official Nespresso® flavour quiz CRM “Find your perfect Nespresso professional coffee moment.” A pure JavaScript, jQuery, HTML 5, Bootstrap 4, and CSS web application.
ReallyB2B
This Nespresso Professional application has the core purpose of helping its consumers find out their best Nespresso coffee experience.
While working at ReallyB2B I had numerous opportunities to solely make huge modifications and amends to this particular web application. This was initially developed by the previous developer a couple of years back. Credit to him, as in my opinion given the client’s requirements at the time he chose all the appropriate and most efficient programming languages to create the app.
Deployment
This is a pure hand-coded project hosted in Marketo.
While at ReallyB2B, one of Nespresso’s requests was to make some changes to the logic, changing and adding some images to it. While working on it I immediately noticed that this app has been almost created in two separate logics which I kept wondering why.
Along with these changes, there were many more on which are impossible to write them all, therefore, I have left the link to both after the changes were made at the bottom of this post.
Decision-making (purely nightmare)
The app had a unique logic with its unique results for small (25ml) size coffees which on question 2 would then immediately reveal question 4 (Aroma) as question 3 no matter what the user’s choice on question 2 (Mild or Intense) would be. As part of the amendment I was forced to practically restructure this application but merge this logic so that on click of question two would reveal question 3 (Kick) in its correct place and on click of question 3, would then reveal question 4 (Aroma). However, on clicking question 2 (Mild or Intense), if the user chooses MILD it should still skip question 3 and show question 4 in its place instead, but if the user chooses INTENSE, then reveal question 3 and then question 4 as normal.
Ok, so I went ahead and made some modifications to a function called “question2Click“.
Before:
// Reusable function for when user selects an option
function question2Click() {
if (question1Answer === "Small") {
// Run code to show question 4 as question 3
narrowEarlyButtons();
// Fade out old text
$("#containerQuestion2").fadeOut(750);
// Animate background image transition
$("#heroImage2").animate({
'opacity': '0'
}, 500);
$("#heroImage4").css({
'display': 'block'
});
$("#heroImage4").animate({
'opacity': '1'
}, 500);
if (question2Answer === "More"){
$("#galleryMild").hide();
$("#galleryIntense").show();
}
// Update nav menu
$("#question3Nav").addClass('fill-nav');
$("#question3Nav").addClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 3:").fadeIn();
});
setTimeout(function() {
// Show new text
$("#containerQuestion4").show();
// Bring in first question
$("#containerQuestion4").animate({
'left': '0px'
}, 600);
}, 1250);
} else {
// Fade out old text
$("#containerQuestion2").fadeOut(750);
// Animate background image transition
$("#heroImage2").animate({
'opacity': '0'
}, 500);
$("#heroImage3").css({
'display': 'block'
});
$("#heroImage3").animate({
'opacity': '1'
}, 500);
if (question2Answer === "More"){
$("#galleryMild").hide();
$("#galleryIntense").show();
}
// Update nav menu
$("#question3Nav").addClass('fill-nav');
$("#question3Nav").addClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 3:").fadeIn();
});
setTimeout(function() {
// Show new text
$("#containerQuestion3").show();
// Bring in first question
$("#containerQuestion3").animate({
'left': '0px'
}, 600);
}, 1250);
}
}
// When user clicks a question 2 answer, assign them a value and progress the quiz
$("#question2Answer1").click(function() {
question2Answer = "Less";
question2Click();
});
$("#question2Answer2").click(function() {
question2Answer = "More";
question2Click();
});
$("#question2Answer3").click(function() {
question2Answer = "None";
question2Click();
});Which would then reveal the following results:
function narrowEarlyButtons() {
// Only show buttons relevant to the user's choices
if (question1Answer === "Small" && question2Answer === "Less") {
// Origin Guatemala
$("#question4Answer4").show();
// Origin Brazil
$("#question4Answer5").show();
} else if (question1Answer === "Small" && question2Answer === "More") {
// Ristretto Intenso
$("#question4Answer1").show();
// Ristretto
$("#question4Answer2").show();
}
}However, in order to achieve the client’s request, I have changed both into the following
// Result that shows when a user clicks on 25ml > MILD
function narrowEarlyButtons() {
// Only show buttons relevant to the user's choices
if (question1Answer === "Small" && question2Answer === "Less") {
// Origin Brazil
$("#question4Answer5").show()
// Bianco Delicato
$("#question4Answer9").show()
}
}
// Reusable function for when user selects an option
function question2Click() {
if (question1Answer === "Small" && question2Answer === "Less") {
// Run code to show question 4 as question 3
narrowEarlyButtons();
// Fade out old text
$("#containerQuestion2").fadeOut(750);
// Animate background image transition
$("#heroImage2").animate({
'opacity': '0'
}, 500);
$("#heroImage4").css({
'display': 'block'
});
$("#heroImage4").animate({
'opacity': '1'
}, 500);
if (question2Answer === "More"){
$("#galleryMild").hide();
$("#galleryIntense").show();
}
// Update nav menu
$("#question3Nav").addClass('fill-nav');
$("#question3Nav").addClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 3:").fadeIn();
});
setTimeout(function() {
// Show new text
$("#containerQuestion4").show();
// Bring in first question
$("#containerQuestion4").animate({
'left': '0px'
}, 600);
}, 1250);
} else {
// Fade out old text
$("#containerQuestion2").fadeOut(750);
// Animate background image transition
$("#heroImage2").animate({
'opacity': '0'
}, 500);
$("#heroImage3").css({
'display': 'block'
});
$("#heroImage3").animate({
'opacity': '1'
}, 500);
if (question2Answer === "More"){
$("#galleryMild").hide();
$("#galleryIntense").show();
}
// Update nav menu
$("#question3Nav").addClass('fill-nav');
$("#question3Nav").addClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 3:").fadeIn();
});
setTimeout(function() {
// Show new text
$("#containerQuestion3").show();
// Bring in first question
$("#containerQuestion3").animate({
'left': '0px'
}, 600);
}, 1250);
}
if (question1Answer === "Large" && question2Answer === "More") {
$("#question3Answer1").hide();
}
}
// When user clicks a question 2 answer, assign them a value and progress the quiz
$("#question2Answer1").click(function() {
question2Answer = "Less";
question2Click();
});
$("#question2Answer2").click(function() {
question2Answer = "More";
question2Click();
});
$("#question2Answer3").click(function() {
question2Answer = "None";
$("#question3Answer2").hide();
$("#question3Answer3").hide();
question2Click();
});
$("#goToQuestion2").click(function(){
// Go back to Q2
$("#containerQuestion3").animate({
'left': '100%'
}, 750);
setTimeout(function(){
$("#containerQuestion3").hide();
}, 850);
$("#heroImage3").animate({
'opacity': '0'
}, 500);
$("#heroImage2").css({
'display': 'block'
});
$("#heroImage2").animate({
'opacity': '1'
}, 500);
$("#question3Nav").removeClass('fill-nav');
$("#question3Nav").removeClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 2:").fadeIn();
});
setTimeout(function() {
$("#containerQuestion2").fadeIn(750);
}, 1000);
question2Answer = "";
});
// Reusable function for when user selects an option
function question3Click() {
// Fade out old text
$("#containerQuestion3").fadeOut(750);
// Animate background image transition
$("#heroImage3").animate({
'opacity': '0'
}, 500);
$("#heroImage4").css({
'display': 'block'
});
$("#heroImage4").animate({
'opacity': '1'
}, 500);
// Update nav menu
$("#question4Nav").addClass('fill-nav');
$("#question4Nav").addClass('bg-gold');
$("#questionTitle").fadeOut(function() {
$(this).text("QUESTION 4:").fadeIn();
});
setTimeout(function() {
// Show new text
$("#containerQuestion4").show();
// Bring in first question
$("#containerQuestion4").animate({
'left': '0px'
}, 600);
}, 1250);
}