Skip to content

Commit

Permalink
Survey/Responses: Use bootstrap styling on survey response view
Browse files Browse the repository at this point in the history
  • Loading branch information
@barnden
barnden committed Mar 19, 2024
1 parent 643a498 commit 0e913d3
Showing 1 changed file with 134 additions and 77 deletions.
211 changes: 134 additions & 77 deletions rails_root/app/views/survey_responses/show.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,149 @@
<p style="color: green"><%= notice %></p>

<%# FIXME: Move this to a stylesheet when we have time %>
<style>
#summary{
margin-left: 6%;
margin-right: 6%;
font-weight: bold;
font-size: 1.25em;
color: #500000
.section-header {
cursor: pointer;
user-select: none;
}
#response {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;

width: 100%;
.section-header h4:before {
content: '\25B6';
font-size: .85em;
min-width: 1.5rem;
}

#response td, #customers th {
border: 0.5px solid #ddd;
width: 90%;
padding: 8px;
.section-header[aria-expanded="true"] h4:before {
content: '\25BC';
font-size: .85em;
min-width: 1.5rem;
}

#response tr:nth-child(even){background-color: #f2f2f2;}
.btn-passthrough {
border: none;
background: none;
color: inherit;
}

#response tr:hover {background-color: #ddd;}
tr {
transition: height 0.0s ease;
}

#response th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
tr.collapsing {
height: auto;
transition: height 0.0s ease;
}
</style>
<% title = ["Part 1. Leadership Behavior - Management", "Part 1. Leadership Behavior - Interpersonal", "Part 2. External Forces", "Part 3. Organizational Structure", "Part 4. Values, Attitudes, and Beliefs"]%>
<%# </head> %>
<center>
<h1>Your leadership type is:</h1>
<%= image_tag("https://upload.wikimedia.org/wikipedia/commons/7/70/Tetrahedron.gif", style: "width:400px;" ) %>
<h2 style="margin-left:20%; margin-right:20%;"> This tetrahedron represents the alignment of the four factors based on your leadership behaviors to align the four factors.</h2>
<p style="margin-left:20%; margin-right:20%; text-align:justify;">
The purpose of this qualitative study was to apply the Synergistic Leadership Theory (SLT) to the leadership experiences of five female superintendents leading successful school districts. The SLT is an interactive theory, which includes female experiences, but it applies to men and women. It provides a framework for leaders to align four factors that impact successful leadership: (a) attitudes, values, and beliefs; (b) leadership behaviors; (c) organizational structure; and (d) external forces. Four research questions guided my study: (a) What are the leadership behaviors of the superintendents? (b) Is the organizational structure of each district aligned with the superintendent’s leadership behaviors? (c) How do the leadership behaviors of the superintendent impact the relations between the district and the external forces? (d) Are the attitudes, values, and beliefs of the superintendent aligned to the attitudes, values, and beliefs of the school board member and the administrative team member
</p>
<% @survey_response = SurveyResponse.find(params[:id])%>
<table style="width: 40%;">
<tr>
<td style="text-align:center">
<h2>Your Response</h2>
</td>
</tr>
<% 5.times do |i|%>
<tr>
<td>
<details>
<summary id ="summary"><%= title[i]%></summary>
<table id="response">
<tbody>
<tr style="background-color: #500000; color: white; ">
<td><%= title[i]%></td>
<td>Response</td>
</tr>
<% @survey_response.answers.map do |answer| %>
<% if answer.question.section == i%>
<tr>
<td>
<details>
<summary><%= answer.question.text %></summary>
<%= answer.question.explanation %>
</details>
</td>
<td><%= answer.choice %></td>
</tr>
<%end%>

<div class="container-lg">
<h1 class="text-center">Your leadership type is: (tbd)</h1>
<div class="row d-flex justify-content-center">
<%= image_tag("https://upload.wikimedia.org/wikipedia/commons/7/70/Tetrahedron.gif", style: "width:400px;" ) %>
</div>
<div class="row d-flex justify-content-center">
<div class="col-8">
<h3>
This tetrahedron represents the alignment of the four factors based on your leadership behaviors to align the four factors.
</h3>
<p style="text-align:justify;">
The purpose of this qualitative study was to apply the Synergistic Leadership Theory (SLT) to the leadership experiences of five female superintendents leading successful school districts. The SLT is an interactive theory, which includes female experiences, but it applies to men and women. It provides a framework for leaders to align four factors that impact successful leadership: (a) attitudes, values, and beliefs; (b) leadership behaviors; (c) organizational structure; and (d) external forces. Four research questions guided my study: (a) What are the leadership behaviors of the superintendents? (b) Is the organizational structure of each district aligned with the superintendent’s leadership behaviors? (c) How do the leadership behaviors of the superintendent impact the relations between the district and the external forces? (d) Are the attitudes, values, and beliefs of the superintendent aligned to the attitudes, values, and beliefs of the school board member and the administrative team member
</p>
</div>
</div>
<hr>
<% choices = ["Strongly Disagree", "Disagree", "Agree", "Strongly Agree"] %>
<div class="row d-flex justify-content-center">
<% sections = @survey_response.questions.map(&:section).uniq %>
<% answers = sections.map {|section| [section, @survey_response.answers.select {|ans| ans.question.section == section}]}.to_h%>
<div class="col-9">
<h2 class="text-center">Your Responses</h2>
<br>
<% sections.each do |section| %>
<% collapse_id = "section#{section}"%>
<div class="section-header"
data-bs-toggle="collapse"
data-bs-target="#<%= collapse_id %>"
aria-expanded="false"
aria-controls="<%= collapse_id %>">
<div class="row d-flex justify-content-center">
<h4 class="text-center col-8">
<%= @sections[section][:title] %>
</h4>
</div>
<div class="row d-flex justify-content-center">
<div class="col-8">
<p class="text-center"><%= @sections[section][:prompt] %></p>
</div>
</div>
</div>
<div class="collapse" id="<%= collapse_id %>">
<table class="table">
<thead class="bg-aggie-maroon text-gray-100">
<tr>
<th>Question</th>
<th>Response</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<% answers[section].each do |ans| %>
<% question_collapse_id = "question#{ans.question.id}" %>
<tr
data-bs-toggle="collapse"
data-bs-target="#<%= question_collapse_id %>"
aria-expanded="false"
aria-controls="<%= question_collapse_id %>"
>
<td><%= ans.question.text %></td>
<td><%= choices[ans.choice] %></td>
<% 4.times do |i| %>
<td>
<input
type="radio"
disabled="disabled"
<%= 'checked="checked"' if i == ans.choice %>
>
</td>
<% end %>
</tbody>
</table>
</details>
</td>
</tr>
<%end%>
</table>
</tr>
<tr class="collapse" id="<%= question_collapse_id %>">
<td colspan="6">
<%= ans.question.explanation %>
</td>
</tr>
<% end %>
</table>
</div>
<% end %>
</div>
</div>
<hr>
<div class="row d-flex justify-content-center">
<div class="col-8 btn-group" role="group">
<%= link_to "Edit Response",
edit_survey_response_path(@survey_response),
class: "btn btn-outline-primary"
%>
<%= button_to "Create Invitation",
invitations_path(survey_response_share_code: @survey_response.share_code),
method: :post,
id: "invitation-button",
form_class: "btn btn-outline-success",
class: "btn-passthrough"
%>
<%= link_to "Delete Response",
@survey_response,
method: :delete,
class: "btn btn-outline-danger"
%>
</div>
</div>
<br>
<p>
<%= button_to "Create Invitation", invitations_path(survey_response_share_code: @survey_response.share_code), method: :post, id: "invitation-button" %>
</p>
<div>
<%= link_to "Edit this survey response", edit_survey_response_path(@survey_response) %> |
<%= link_to "Back to survey responses", survey_responses_path %>
<%= button_to "Destroy this survey response", @survey_response, method: :delete %>
<div class="row d-flex justify-content-center">
<div class="col-6 text-center">
<%= link_to "Back to survey responses", survey_responses_path %>
<div>
</div>

</center>
</div>

0 comments on commit 0e913d3

Please sign in to comment.