Hi I have a form and i want to show the nested form to add questions and update the raty stars according to answers the form is given as
<%= form_for @interview_round do |f| %>
<div class="modal-content">
<div class="row margin_0 margin_T10">
<h4 class="margin_T0 margin_B30 center-align">Interview Feedback Form</h4>
<div class="col s12 m12">
<div class=" interview_details_box">
<div class="row">
<div class="input-field col s12 m6">
<label for="intr_type" class="">Interview Type</label>
<%=h @interview_round.scheduled_at %>
</div>
<div class="input-field col s12 m6">
<select>
<option value="" selected>Choose your option</option>
<option value="1">Trainee</option>
<option value="2">Project Manager</option>
<option value="3">SSDE</option>
<option value="4">SDE</option>
</select>
<label for="intr_pos" class="">Position</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m6">
<input id="intr_candidate" type="text" class="validate" placeholder="Candidate" >
<label for="intr_candidate" class="">Candidate</label>
</div>
<div class="input-field col s12 m6">
<%= f.text_field :interviewer_name %>
<label for="intr_interviewer" class="">Interviewer</label>
</div>
</div>
<div class="row">
<div class=" col s12 m6 logical">
<label>Logical & Analytical Skills</label>
<div id="star-log" class="stars" > </div>
<%= f.text_field :log_skill, :id=>'hint-log' %>
</div>
<div class=" col s12 m6">
<label>Communication skills</label>
<div id="star-comm" class="stars" ></div>
<%= f.text_field :comm_skill, :id=>'hint-comm' %>
</div>
</div>
<div class="row">
<div class=" col s12 m6">
<label>Technical Skills</label>
<div id="star-tech" class="stars"></div>
<%= f.text_field :tech_skill, :id=>'hint-tech' %>
</div>
<div class="col s12 m6">
<label >Overall Rating</label>
<div id="star-overall"></div>
<%= f.text_field :overall_skill, :id=>'hint-overall' %>
</div>
</div>
<div class="row">
<div class="input-field col s12 m6">
<select>
<option value="" selected>Choose your option</option>
<option value="1">Recommended</option>
<option value="2">Not Recommended</option>
<option value="3">OnHold</option>
</select>
<label for="intr_result" class="">Result</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m12">
<%= f.text_area(:remarks, size: '50x10') %>
<label for="intr_remark">Remark</label>
</div>
<div class="row">
<%= f.fields_for :round_questions do |question| %>
<%= question.label :question %>
<%= question.text_field :question %>
<%= question.label :answer %>
<%= question.text_field :answer %>
<% end %>
</div>
</div>
</div>
</div>
</div>
<div class="row margin_0 margin_T10">
<div class="col s12 m12">
<div class="row margin_0 showdiv" style="display:none;">
<div class="col s12 m12">
<div class="input-field col s12 m12">
<input id="addques" type="text" class="validate" placeholder="Question" >
<label for="addques" class="">Question</label>
</div>
</div>
</div>
<div class="row margin_0 margin_T10">
<div class="col s12 center-align">
<button class="btn waves-effect waves-light btn-medium custom_btn_gray" type="button" name="action" onclick="$('.showdiv').toggle();">Add Question</button>
</div>
</div>
</div>
</div>
<div class="row margin_0 margin_T10">
<div class='col s12 center-align'>
<%= button_tag(:class => "btn waves-effect waves-light btn-large custom_btn_gray") do %>
Submit <i class="mdi-content-send right"></i>
<% end %>
</div>
</div>
<% end %>
</div>
I am actually using it in the edit form of the interview_rounds controller
and the method for nested form is given as
def edit
@interview_round = InterviewRound.where(id: params[:id]).first
3.times {@interview_round.round_questions.build}
respond_to do |format|
format.js
end
end
the interview_rounds model
has_many :round_questions
accepts_nested_attributes_for :round_questions
and round_question model
belongs_to :interview_round
The rating system is actually defined as , when the user rate stars for logical skills, communication skill and technical skill(score is coming from question and answers) the average of the stars are calculated and stored in the overall skill and the javascript for this functionality is given as
$('#star-log').raty({
target : '#hint-log',
targetType : 'score',
targetKeep : true
});
$('#star-comm').raty({
target : '#hint-comm',
targetType : 'score',
targetKeep : true
});
$('#star-tech').raty({
target : '#hint-tech',
targetType : 'score',
targetKeep : true
});
$('#star-overall').raty({
target : '#hint-overall',
targetType : 'score',
targetKeep : true,
readOnly : true
});
$(document).on("click", ".stars", function(){
var score = 0 ;
//loop through stars to get score
$('.stars').each(function(i, obj) {
//if score is there will be undefined if star not selected
if ($(obj).raty('score'))
score += $(obj).raty('score');
});
//calculating average
score = score / $(".stars").length;
$('#star-overall').raty({score: score });
$("#hint-overall").val(score.toFixed(2));
});
Now the funcionality is defined by
There will be 3 questions already present on the form and there would be a button to add more optional questions(3 questions are mandatory) and these questions' answer would be in the star rating type when the user rate the question the score would be calculated and being stored in the technical skill as the average rate (technical skill is contributing to the overall skill)
Please tell me how can i give option to add more questions and those answers rating would be calculated as average and store in the technical skill, i am working on it for a day bu got no clue how to do it , Thankx in advance
