Creating Dynamic Surveys
<script type="text/x-jsrender" id="surveyTemplate">
<li class="question">
<input type="text" name="survey[question]" />
<button class="add_answer">Add Answer</button>
<ul></ul>
</li>
</script>
<script type="text/x-jsrender" id="answerTmpl">
<li class="answer">
<input type="text" name="survey[answer]" />
</li>
</script>
Jquery Integration
$(document).ready(function () {
$("#add_question").click(function(e) {
e.preventDefault();
$("#questionForm ol").append($.templates("#surveyTemplate").render())
});
$("#questionForm").on('click', '.add_answer', function(e) {
e.preventDefault();
console.log()
$(this).parent().find("ul").append($.templates("#answerTmpl").render())
});
});
Simplified erb Form
<div class="container">
<br>
<form action="/surveys" method="post" id="questionForm">
<input type="text" name="title" placeholder="Enter survey name">
<button id="add_question"> Add a question </button>
<ol></ol>
<input type="submit" value="create" id="submit_form">
</form>
</div>
Optimizing Survey Data Collection
I have integrated a dynamic survey generation feature using JavaScript templates in my Sinatra application. Currently, the input fields in these templates have predefined parameter names for data collection within Sinatra. However, I am seeking suggestions to optimize this process. Specifically, I want to use "survey[question]" as the key and create an array of values for "survey[answer]". Can anyone suggest a more efficient approach?</p>
</div></questionbody>
<exquestionbody>
<div class="question">
<p>Javascript Templates Implementation</p>
<pre><code> <script type="text/x-jsrender" id="questionTmpl">
<li class="question">
<input type="text" name="survey[question]" />
<button class="add_answer">Add Answer</button>
<ul></ul>
</li>
</script>
<script type="text/x-jsrender" id="answerTmpl">
<li class="answer">
<input type="text" name="survey[answer]" />
</li>
</script>
Jquery Functionality
$(document).ready(function () {
$("#add_question").click(function(e) {
e.preventDefault();
$("#questionForm ol").append($.templates("#questionTmpl").render())
});
$("#questionForm").on('click', '.add_answer', function(e) {
e.preventDefault();
console.log()
$(this).parent().find("ul").append($.templates("#answerTmpl").render())
});
});
ERB Form structure
<div class="container">
<br>
<form action="/surveys" method="post" id="questionForm">
<input type="text" name="title" placeholder="Enter survey name">
<button id="add_question"> Add a question </button>
<ol></ol>
<input type="submit" value="create" id="submit_form">
</form>
</div>
I am working on building a survey application using Sinatra. The current functionality includes dynamic creation of surveys through JavaScript templates. I have a query regarding the parameter names for input text fields in these templates. I would like to modify the setup so that Sinatra collects the values as a hash using "survey[question]" as the key and an array of "survey[answer]" parameters as the corresponding values for each key.