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.
105 lines
3.4 KiB
HTML
105 lines
3.4 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Questionnaire</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 768px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.question {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.radio-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio-container input[type="radio"] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio-container label {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio-container input[type="radio"]:checked+.radio-label {
|
||
|
|
background-color: #d54e21;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio-label {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border: 1px solid #d54e21;
|
||
|
|
border-radius: 20px;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 15px;
|
||
|
|
}
|
||
|
|
.question label {
|
||
|
|
flex: 1 0 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Questionnaire</h1>
|
||
|
|
<form>
|
||
|
|
<h2>Question 1</h2>
|
||
|
|
<div class="question">
|
||
|
|
<div class="radio-container">
|
||
|
|
<input type="radio" id="excellent" name="question1">
|
||
|
|
<label for="excellent" class="radio-label">👍 Excellent</label>
|
||
|
|
</div>
|
||
|
|
<div class="radio-container">
|
||
|
|
<input type="radio" id="veryGood" name="question1">
|
||
|
|
<label for="veryGood" class="radio-label">🙂 Very Good</label>
|
||
|
|
</div>
|
||
|
|
<div class="radio-container">
|
||
|
|
<input type="radio" id="fair" name="question1">
|
||
|
|
<label for="fair" class="radio-label">😐 Fair</label>
|
||
|
|
</div>
|
||
|
|
<div class="radio-container">
|
||
|
|
<input type="radio" id="poor" name="question1">
|
||
|
|
<label for="poor" class="radio-label">🙁 Poor</label>
|
||
|
|
</div>
|
||
|
|
<div class="radio-container">
|
||
|
|
<input type="radio" id="unacceptable" name="question1">
|
||
|
|
<label for="unacceptable" class="radio-label">👎 Unacceptable</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h2>Question 2</h2>
|
||
|
|
<div class="question">
|
||
|
|
<label><input type="radio" name="question2" value="option5"><span> 😃 Excellent</span></label>
|
||
|
|
<label><input type="radio" name="question2" value="option4"><span> 🙂 Very Good</span></label>
|
||
|
|
<label><input type="radio" name="question2" value="option3"><span> 😐 Fair</span></label>
|
||
|
|
<label><input type="radio" name="question2" value="option2"><span> ☹️ Poor</span></label>
|
||
|
|
<label><input type="radio" name="question2" value="option1"><span> 😠 Unacceptable</span></label>
|
||
|
|
</div>
|
||
|
|
<h2>Feedback</h2>
|
||
|
|
<textarea name="feedback" rows="4" cols="50" id="feedback"></textarea><br>
|
||
|
|
<input type="submit" value="Submit">
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
// var feedback = document.getElementById("feedback");
|
||
|
|
// feedback.onfocus = function() {
|
||
|
|
// alert("Please provide your valuable feedback!");
|
||
|
|
// }
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|