Emoji-Driven Survey

Developer
Brian Haferkamp
Size
5,710 Kb
Views
2,024
  1. Emoji-Driven Survey Previews
  2. Emoji-Driven Survey HTML Codes
  3. Emoji-Driven Survey CSS Codes
  4. Emoji-Driven Survey JS Codes

How do I make an emoji-driven survey?

A survey that allows users to choose their emotion, as opposed to a number, to show their satisfaction level. Can be clever or straight forward. Each emotion is attached to a traditional number (1-5) and is calculated using JavaScript to create a dynamic survey that is based on each user's experience. Depending on the level of satisfaction, a different message is show to the user at the end.. What is a emoji-driven survey? How do you make a emoji-driven survey? This script and codes were developed by Brian Haferkamp on 27 January 2023, Friday.

Emoji-Driven Survey Previews
IQ Test

Emoji-Driven Survey - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Emoji-Driven Survey</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Q1-->
<div id="question-1"> <div class="question"> <h1>How was your overall experience?</h1> </div> <ul class="emoji-choices"> <li class="choice" data-value="5"> <p class="emoji"><i class="em em-heart_eyes"></i></p> <p class="reaction">I can't wait to tell everyone I know about this!</p> </li> <li class="choice" data-value="4"> <p class="emoji"><i class="em em-smile"></i></p> <p class="reaction">Thanks! I really enjoyed it.</p> </li> <li class="choice" data-value="3"> <p class="emoji"><i class="em em-neutral_face"></i></p> <p class="reaction">Meh. I could take it or leave it</p> </li> <li class="choice" data-value="2"> <p class="emoji"><i class="em em-disappointed"></i></p> <p class="reaction">I had such high hopes, but ultimately it was disappointing</p> </li> <li class="choice" data-value="1"> <p class="emoji"><i class="em em-angry"></i></p> <p class="reaction">I can't believe I wasted money on this!</p> </li> </ul><a class="answer-submit button" href="#">Submit Answer</a>
</div>
<!-- Q2-->
<div class="hide" id="question-2"> <div class="question"> <h1>How was our customer service?</h1> </div> <ul class="emoji-choices"> <li class="choice" data-value="5"> <p class="emoji"><i class="em em-heart_eyes"></i></p> <p class="reaction">You had me at, "Hello."</p> </li> <li class="choice" data-value="4"> <p class="emoji"><i class="em em-smile"></i></p> <p class="reaction">I felt like I was being well taken care of.</p> </li> <li class="choice" data-value="3"> <p class="emoji"><i class="em em-neutral_face"></i></p> <p class="reaction">The agent was efficient and solved my problem (mostly).</p> </li> <li class="choice" data-value="2"> <p class="emoji"><i class="em em-disappointed"></i></p> <p class="reaction">We eventually figured it out, but it took a lot longer than it should have.</p> </li> <li class="choice" data-value="1"> <p class="emoji"><i class="em em-angry"></i></p> <p class="reaction">You need to hire a new agent. The experience was terrible.</p> </li> </ul><a class="answer-submit button" href="#">Submit Answer</a>
</div>
<!-- Q3-->
<div class="hide" id="question-3"> <div class="question"> <h1>Was the product what you expected?</h1> </div> <ul class="emoji-choices"> <li class="choice" data-value="5"> <p class="emoji"><i class="em em-heart_eyes"></i></p> <p class="reaction">It was so much better than I could have hoped!</p> </li> <li class="choice" data-value="4"> <p class="emoji"><i class="em em-smile"></i></p> <p class="reaction">It met my expectations and more.</p> </li> <li class="choice" data-value="3"> <p class="emoji"><i class="em em-neutral_face"></i></p> <p class="reaction">Solid. Exactly what I expected.</p> </li> <li class="choice" data-value="2"> <p class="emoji"><i class="em em-disappointed"></i></p> <p class="reaction">It wasn't as awesome as I hoped. A little disappointed.</p> </li> <li class="choice" data-value="1"> <p class="emoji"><i class="em em-angry"></i></p> <p class="reaction">Honestly, it's a piece of garbage.</p> </li> </ul><a class="answer-submit button" href="#">Submit Answer</a> <!-- Thank you-->
</div>
<div class="summary hide"> <h2>Thanks for taking our survey! Your feedback helps us make better products.</h2> <h3 class="hide" id="amazing">We are SO happy that you enjoyed your experience with our product! Please share it with everyone you know!</h3> <h3 class="hide" id="good">It sounds like your experience with our product was pretty good. Thank you for using it and helping us to make it better. Please consider sharing it with your friends.</h3> <h3 class="hide" id="okay">Thank you for trying out our product. We're always trying to get better. Your survey answers will help us better serve you in the future. We hope you'll consider sharing our product with others. </h3> <h3 class="hide" id="disappointing">We're really bummed that your experience with our product wasn't what you though it would be. Thank you for sharing your experience with us. Your answers will help us a take a look at how we can improve our product.</h3> <h3 class="hide" id="terrible">We're sorry that you had such a terrible experience with our product. As hard as it is to swallow a bitter pill, we appreciate your feedback and will look into how we can improve the areas you shared with us. We're always improving and hope you'll give our product another try in the future.</h3>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Emoji-Driven Survey - Script Codes CSS Codes

body { text-align: center; font-family: "Nunito", sans-serif;
}
h3 { font-weight: 300;
}
.button { padding: 1rem; color: white; background: black; text-decoration: none; text-transform: uppercase; display: inline-block; margin: 0 0 2rem;
}
.hide { display: none;
}
.emoji-choices { list-style: none; padding: 0; text-align: center;
}
@media (min-width: 900px) { .emoji-choices { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1000px; margin: auto; }
}
@media (min-width: 900px) { .choice { width: 20vw; margin-top: 3rem; }
}
.emoji { font-size: 1.5rem; -webkit-transition: font-size 300ms ease; transition: font-size 300ms ease; cursor: pointer; margin: 0;
}
.emoji-selected { font-size: 2rem;
}
.reaction { font-size: 1rem; opacity: 0;
}
.reaction-fade-in { -webkit-animation: fadeIn 300ms ease; animation: fadeIn 300ms ease; opacity: 1;
}
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
.question { margin-top: 1rem;
}
.summary { text-align: center; margin: auto; max-width: 800px;
}

Emoji-Driven Survey - Script Codes JS Codes

$('.choice').on('click', function () { var $this = $(this); $('.reaction').removeClass('reaction-fade-in'); $('.emoji').removeClass('emoji-selected'); $this.find('.reaction').addClass('reaction-fade-in'); $this.find('.emoji').addClass('emoji-selected');
});
$('#question-1 .choice').on('click', function() { var ranking1 = $(this).attr('data-value'); $('.answer-submit').on('click', function() { sessionStorage.setItem('ranking1', ranking1); $('#question-2').removeClass('hide'); $('#question-1').addClass('hide'); });
});
$('#question-2 .choice').on('click', function() { var ranking2 = $(this).attr('data-value'); $('.answer-submit').on('click', function() { sessionStorage.setItem('ranking2', ranking2); $('#question-3').removeClass('hide'); $('#question-2').addClass('hide'); });
});
$('#question-3 .choice').on('click', function() { var ranking3 = $(this).attr('data-value'); $('.answer-submit').on('click', function() { sessionStorage.setItem('ranking3', ranking3); $('#question-3').addClass('hide'); $('.summary').removeClass('hide'); var total; function calculateTotal() { var ranking1 = sessionStorage.getItem('ranking1'); var ranking2 = sessionStorage.getItem('ranking2'); var ranking3 = sessionStorage.getItem('ranking3'); var total = parseInt(ranking1) + parseInt(ranking2) + parseInt(ranking3); if (total >= 14) { $('#amazing').removeClass('hide'); } else if ((total < 14) && (total > 10 )) { $('#good').removeClass('hide'); } else if ((total < 11) && (total > 7 )) { $('#okay').removeClass('hide'); } else if ((total < 8) && (total > 4 )) { $('#disappointing').removeClass('hide'); } else { $('#terrible').removeClass('hide'); } } // if (total > 13) { // $('#amazing').removeClass('hide'); // } calculateTotal();
});
});
Emoji-Driven Survey - Script Codes
Emoji-Driven Survey - Script Codes
Home Page Home
Developer Brian Haferkamp
Username brianhaferkamp
Uploaded January 27, 2023
Rating 4
Size 5,710 Kb
Views 2,024
Do you need developer help for Emoji-Driven Survey?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Brian Haferkamp (brianhaferkamp) Script Codes
Name
Brutal, Bro
Creating a CSS Flexbox Grid
Follow Your Heart
RADIOLOGY
Gradient Transitions Between Sections
Full-Width Hero with Image Using Flexbox
2-Up Magazine Layout
System Fonts Can Be Beautiful
Travel Blog Design with Sticky Nav and Sidebar
Brutalism Web Design School
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!