Net Promoter Score prototype

Developer
Christijan
Size
3,244 Kb
Views
20,240
  1. Net Promoter Score prototype Previews
  2. Net Promoter Score prototype HTML Codes
  3. Net Promoter Score prototype CSS Codes
  4. Net Promoter Score prototype JS Codes

How do I make an net promoter score prototype?

What is a net promoter score prototype? How do you make a net promoter score prototype? This script and codes were developed by Christijan on 07 October 2022, Friday.

Net Promoter Score prototype Previews
IQ Test

Net Promoter Score prototype - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Net Promoter Score prototype</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="net-promoter-score"> <h1>Review Medical Guardian</h1> <h2>What is your overall rating of Medical Guardian?</h2> <div class="count-container"> <div class="numbered-square" id="star-five"><i class="material-icons md-36">star</i></div> <div class="numbered-square" id="star-four"><i class="material-icons md-36">star</i></div> <div class="numbered-square" id="star-three"><i class="material-icons md-36">star</i></div> <div class="numbered-square" id="star-two"><i class="material-icons md-36">star</i></div> <div class="numbered-square" id="star-one"><i class="material-icons md-36">star</i></div> </div> <div class="clear"></div> <br><br> <h2>How likely are you to recommend<br>Medical Guardian<br>to a friend or colleague?</h2> <div id="nps-picker"> <div class="nps-picker-left-column"> <p>Not at all likely</p> </div><!-- .nps-picker-left-column --> <div class="nps-picker-center-column"> <div class="nps-picker-option"> <p>0</p> </div><!-- .nps-picker-option --> <div class="nps-picker-option"> <p>1</p> </div><!-- .nps-picker-option --> <div class="nps-picker-option"> <p>2</p> </div><!-- .nps-picker-option --> <div class="nps-picker-option"> <p>3</p> </div><!-- .nps-picker-option --> <div class="nps-picker-option"> <p>4</p> </div><!-- .nps-picker-option --> <div class="nps-picker-option empty"> <p></p> </div><!-- .nps-picker-option --> <div class="nps-picker-option middle"> <p>5</p> <p class="label">Neutral</p> </div><!-- .nps-picker-option --> <div class="nps-picker-option"> <p>6</p> </div><!-- .nps-picker-option --> <div class="nps-picker-option"> <p>7</p> </div><!-- .nps-picker-option --> <div class="nps-picker-option"> <p>8</p> </div><!-- .nps-picker-option --> <div class="nps-picker-option"> <p>9</p> </div><!-- .nps-picker-option --> <div class="nps-picker-option"> <p>10</p> </div><!-- .nps-picker-option --> </div><!-- .nps-picker-center-column --> <div class="nps-picker-right-column"> <p>Extremely likely</p> </div><!-- .nps-picker-right-column --> </div><!-- #nps-picker -->
</div><!-- #net-promoter-score --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Net Promoter Score prototype - Script Codes CSS Codes

h1, h2 {
width: 300px;
font-family: Lato;
text-align: center;
color: #4A4A4A;
}
h1 { font-size: 24px; line-height: 30px; margin-bottom:2em; color: red;
}
h2 { font-size: 18px; line-height: 22px;
}
#net-promoter-score { margin: 2em auto; width: 320px;
height: 700px;
}
p { font-family: Lato; font-size: 11pt;
}
#nps-picker { width: 303px; height: 136px; margin: 32px 0 0 0;
}
.nps-picker-left-column p { text-align: right; width: 52px; float: left; padding-right:7.5px; margin-top:1px;
}
.nps-picker-right-column p { margin-top: 96px; width: 45px; float:left; padding-left:7.5px;
}
.nps-picker-center-column { width: 180px; height: 100%; background: white; float:left;
}
.nps-picker-option { width:44px; height:44px; background-color: #e8e8e9; margin:0 1px 1px 0; float:left;
}
/*.nps-picker-option:hover { opacity: .7; cursor: pointer;
}*/
.empty { background-color: white;
}
.nps-picker-option p { text-align: center; font-size: 14pt; font-weight: 700; line-height: 17px; margin-top: 13px;
}
.middle { width: 89px; margin-left: -45px;
}
p.label { font-size: 11px; line-height: 16px; margin-top:-2em; font-weight: 400; }
.selected { background-color: #7bbae6; color: white;
}
.material-icons.md-36 { font-size: 36px; color: #e8e8e9;
}
/*.material-icons.md-36:hover { color: #ffc502;
}*/
.numbered-square { text-align: center; width:43px; height:43px; float: right;
}
/*.numbered-square:hover{ cursor:pointer;
}*/
.clear { clear: both;
}
#star-five { margin-right:62px;
}
.material-icons.md-36.star-selected { color: #ffc502;
}

Net Promoter Score prototype - Script Codes JS Codes

/*$(function(){ $( "div.box" ).bind( "tap", tapHandler ); function tapHandler( event ){ $( event.target ).addClass( "tap" ); }
}); */
$( ".nps-picker-option" ).bind( "tap", tapHandler);
function tapHandler (event) { if ($( event.target ).hasClass( "selected" )){ $(event.target).removeClass("selected"); } else { $('.nps-picker-option').removeClass("selected"); $( event.target ).toggleClass( "selected" ); }
};
$(".material-icons").on("tap", function(){ if ($( this ).hasClass( "star-selected" )){ $(".material-icons").removeClass("star-selected"); } else {
// alert("The paragraph was clicked."); if ($(this).parent().is("#star-five")) { $(".material-icons").addClass("star-selected"); } else if ($(this).parent().is("#star-four")) { $("i").each(function(index, element){ if($(element).parent().prop("id")!=("star-five")){ $(this).addClass("star-selected"); } }) } else if ($(this).parent().is("#star-three")) { $("i").each(function(index, element){ if(($(element).parent().prop("id")!=("star-five")) && ($(element).parent().prop("id")!=("star-four")) ){ $(this).addClass("star-selected"); } }) } else if ($(this).parent().is("#star-two")) {
// alert ("this"); $("i").each(function(index, element){
// $(element).append( "<p>Test</p>" );
// $(element).addClass("star-selected");
// alert("parent-id =" + index + " whaaat? " + $(this).parent().prop("id")); if(($(element).parent().prop("id")!=("star-five")) && ($(element).parent().prop("id")!=("star-four")) && ($(element).parent().prop("id")!=("star-three")) ){ $(this).addClass("star-selected"); } }) } else if ($(this).parent().is("#star-one")) {
// alert ("this"); $("i").each(function(index, element){
// $(element).append( "<p>Test</p>" );
// $(element).addClass("star-selected");
// alert("parent-id =" + index + " whaaat? " + $(this).parent().prop("id")); if(($(element).parent().prop("id")!=("star-five")) && ($(element).parent().prop("id")!=("star-four")) && ($(element).parent().prop("id")!=("star-three")) && ($(element).parent().prop("id")!=("star-two"))){ $(this).addClass("star-selected"); } }) } }
});
/*$(".material-icons").hover(function(){ if ($(this).parent().is("#star-five")) { $(".material-icons").toggleClass("star-selected"); } else if ($(this).parent().is("#star-four")) { $("i").each(function(index, element){ if($(element).parent().prop("id")!=("star-five")){ $(this).toggleClass("star-selected"); } }) } else if ($(this).parent().is("#star-three")) {
// alert ("this"); $("i").each(function(index, element){ if(($(element).parent().prop("id")!=("star-five")) && ($(element).parent().prop("id")!=("star-four")) ){ $(this).toggleClass("star-selected"); } }) } else if ($(this).parent().is("#star-two")) { $("i").each(function(index, element){ if(($(element).parent().prop("id")!=("star-five")) && ($(element).parent().prop("id")!=("star-four")) && ($(element).parent().prop("id")!=("star-three")) ){ $(this).toggleClass("star-selected"); } }) } else if ($(this).parent().is("#star-one")) { $("i").each(function(index, element){ if(($(element).parent().prop("id")!=("star-five")) && ($(element).parent().prop("id")!=("star-four")) && ($(element).parent().prop("id")!=("star-three")) && ($(element).parent().prop("id")!=("star-two"))){ $(this).toggleClass("star-selected"); } }) }
});*/
Net Promoter Score prototype - Script Codes
Net Promoter Score prototype - Script Codes
Home Page Home
Developer Christijan
Username ijantje
Uploaded October 07, 2022
Rating 3
Size 3,244 Kb
Views 20,240
Do you need developer help for Net Promoter Score prototype?

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!

Christijan (ijantje) Script Codes
Name
Net Promoter Score prototype horizontal
Intake Form Page 2
Intake Form Page 6 Thanks
Intake Form
Intake Form Page 4 Verify
Intake Form Page 3
A Pen by Christijan
Intake Form Page 5 Success
Intake Form Revision
Create amazing love letters 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!