You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.6 KiB
HTML
107 lines
3.6 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.question {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.feedback {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.star-rating {
|
||
|
|
direction: rtl;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.star-rating input[type=radio] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.star-rating label {
|
||
|
|
font-size: 30px;
|
||
|
|
color: lightgray;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.star-rating input[type=radio]:checked ~ label,
|
||
|
|
.star-rating label:hover,
|
||
|
|
.star-rating label:hover ~ label {
|
||
|
|
color: #d54e21;
|
||
|
|
}
|
||
|
|
.rate-meaning {
|
||
|
|
display: inline-block;
|
||
|
|
margin-left: 15px;
|
||
|
|
vertical-align: middle;
|
||
|
|
color: #d54e21;
|
||
|
|
}
|
||
|
|
.rate-icon {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
vertical-align: middle;
|
||
|
|
/* background: url('thumbsup.svg') no-repeat center; */
|
||
|
|
/* background-size: contain; */
|
||
|
|
filter: invert(27%) sepia(97%) saturate(7482%) hue-rotate(359deg) brightness(100%) contrast(107%);
|
||
|
|
}
|
||
|
|
.rate-icon path {
|
||
|
|
/* stroke: #d54e21; */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<!-- <h1>Questionnaire</h1> -->
|
||
|
|
<form>
|
||
|
|
<div class="question">
|
||
|
|
<h4>Passion with Job</h4>
|
||
|
|
<div class="star-rating">
|
||
|
|
<input type="radio" id="q1-5" name="q1" value="5" checked>
|
||
|
|
<label for="q1-5">★</label>
|
||
|
|
<input type="radio" id="q1-4" name="q1" value="4">
|
||
|
|
<label for="q1-4">★</label>
|
||
|
|
<input type="radio" id="q1-3" name="q1" value="3">
|
||
|
|
<label for="q1-3">★</label>
|
||
|
|
<input type="radio" id="q1-2" name="q1" value="2">
|
||
|
|
<label for="q1-2">★</label>
|
||
|
|
<input type="radio" id="q1-1" name="q1" value="1">
|
||
|
|
<label for="q1-1">★</label>
|
||
|
|
</div>
|
||
|
|
<span class="rate-meaning">
|
||
|
|
<span id="rate-text">Excellent</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="feedback">
|
||
|
|
<h2>Any additional feedback?</h2>
|
||
|
|
<textarea id="feedback" name="feedback" rows="4" cols="50"></textarea>
|
||
|
|
</div>
|
||
|
|
<input type="submit" value="Submit"> -->
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var ratings = {
|
||
|
|
"1": { text: "Unacceptable", icon: "./img/thumbsdown.svg" },
|
||
|
|
"2": { text: "Poor", icon: "./img/sadface.svg" },
|
||
|
|
"3": { text: "Fair", icon: "./img/neutralface.svg" },
|
||
|
|
"4": { text: "Very Good", icon: "./img/happyface.svg" },
|
||
|
|
"5": { text: "Excellent", icon: "./img/thumbsup.svg" }
|
||
|
|
};
|
||
|
|
var rateInputs = document.querySelectorAll('.star-rating input[type="radio"]');
|
||
|
|
var rateText = document.getElementById('rate-text');
|
||
|
|
var rateIcon = document.getElementById('rate-icon');
|
||
|
|
|
||
|
|
rateInputs.forEach(function(input) {
|
||
|
|
input.addEventListener('change', function() {
|
||
|
|
var rating = ratings[this.value];
|
||
|
|
rateText.textContent = rating.text;
|
||
|
|
// rateIcon.src = rating.icon;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|