Looking to create a unique Survey layout that includes:
- Question Name
- Options
The question name is editable and can be changed with a click.
Initially, there is one option with a checkbox to select it. This option should also update when clicked. Additionally, there's a button to add a new option to a specific question, allowing for multiple options to be selected.
Once the first question is edited, users should be able to add more questions and repeat the process. I have some code that allows for text editing on click, but I'm unsure how to add additional options or questions. My code looks like this:
function help() {
// code to add another option
}body {
background-color: #00ffaa;
font-family: Verdana;
text-align: center;
}
.questionName {
margin-top: 15px;
font-size: 20px;
}
.optionName {
margin-top: 8px;
font-size: 15px;
font-style: italic;
margin-left: 605px;
}
.box {
margin-top: 12px;
}
.option {
display: flex;
}<html>
<head>
<title>Your Survey Form</title>
<link rel="stylesheet" href="DemoSurveyStyle.css">
</head>
<body>
<form>
<h1 id="myText" contenteditable="true">Survey Name</h1>
<div id="question">
<div class="questionName" contenteditable="true">Question</div>
<div class="option">
<div class="optionName" contenteditable="true">Option</div>
<input type="checkbox" class="box">
</div>
<button id="addOpButton" onclick="help()">Add Option</button>
</div>
</form>
<script src="DemoCode.js"></script>
</body>
</html>If you have a solution on how to achieve this, I would greatly appreciate your guidance. It seems straightforward, but I lack experience in implementing it.