dentalruralhealth-pack
Version:
Interactive to simulate a rural health office creation
149 lines (139 loc) • 8.07 kB
HTML
<div class="page-3">
<!-- Modal for Strategy space -->
<div class="modal fade" id="strategy-modal" tabindex="-1" role="dialog" aria-labelledby="Strategy">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">View Strategies</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row info-header">
<div class="col-xs-6">
<h3>3. Select Your Strategy</h3>
</div>
<div class="col-xs-6 info-nav">
<!-- Instructions button -->
<a class="btn btn-default btn-sm btn-help pull-right" href="#" data-target="#help-modal-3" data-toggle="modal" role="button">
<span class="glyphicon glyphicon-question-sign"></span> Instructions</a>
</a>
<!-- Instructions modal -->
<div class="modal fade" id="help-modal-3" tabindex="-1" role="dialog" aria-labelledby="Instructions">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Instructions</h4>
</div>
<div class="modal-body">
<h4>Select a Strategy</h4>
<p>Select the proposal that you believe will be most successful for improving oral health and access to dental care for poor/low-income rural adults (18-65y/o) in Springdale County.</p>
<p>When you have selected a proposal, click "Step 3" to answer questions related to how and why you made your selection. You will have the opportunity later to view pros and cons for each strategy and reflect on your selection.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Map Layer button -->
<a href="#" class="btn btn-default btn-sm pull-right" data-toggle="modal" data-target="#map-view-modal-3">
<span class="glyphicon glyphicon-picture"></span> Map View
</a>
<!-- Map Layer modal -->
<div class="modal fade map-view-modal" id="map-view-modal-3" tabindex="-1" role="dialog" aria-labelledby="Map Layer">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Map View</h4>
</div>
<div class="modal-body">
<div class="map-layers">
<img class="map-layer" src="<%=layers[0].image%>" alt="rural health base map" />
<% for (var i=1; i < layers.length; i++) { %>
<% var layer = layers[i]; %>
<img data-id="<%=layer.id%>"
class="map_layer_<%=layer.id%> map-layer"
src="<%=layer.image%>"
alt="<%= layer.name %>"
style="display: none; z-index: <%=layer.z_index%>; opacity:0.<%=layer.transparency%>; -moz-opacity:0.<%=layer.transparency%>; filter:alpha(opacity=<%=layer.transparency%>);"></img>
<% } %>
</div>
<div class="map-legend-container clearfix row-nopadding">
<div class="map-legend-container">
<div>
<h4>Map Legends</h4>
<div id="base_map_layer"><%= layers[0].legend %></div>
</div>
<% for (var i=1; i < layers.length; i++) { %>
<% var layer = layers[i]; %>
<div data-id="<%=layer.id%>"
class="pull-left map_legend_<%=layer.id%> map_legend choices"
style="display: none">
<h5><%=layer.display_name%></h5>
<%=layer.legend %>
</div>
<% } %>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-nopadding">
<div class="col-xs-7 alert-container">
<% if (selectedStrategy) { %>
<div class="success_instructions well left alert-success">
<b>You've selected Strategy #<%= selectedStrategy.ordinal %></b>.<br />Click <b>Step 4</b> to continue. In the next step, you'll be asked a few questions related to how and why you made your selection. Later, You'll have the opportunity to view pros and cons for each strategy and reflect on your selection.
</div>
<% } else { %>
<div class="basic_instructions well left alert-info">
Select the proposal that you believe will be most successful for improving oral health and access to dental care for poor/low-income rural adults (18-65y/o) in Springdale County.
</div>
<% } %>
</div>
<div class="col-xs-5 strategy-state-container">
<div>
<% for (var i = strategies.length - 1; i >= 0; i--) { %>
<% var strategy = strategies[i] %>
<div data-id="<%=strategy.id%>" class="strategy-state pull-right <% if (strategy.selected) { %>selected<% } %> <% if (strategy.viewed) { %> viewed <% } %>">
<%= strategy.ordinal %>
</div>
<% } %>
<div class="strategy-state-label pull-right">Strategies: </div>
</div>
</div>
</div>
<div class="custom-container">
<% for (var i=0; i < strategies.length; i++) { %>
<% var strategy = strategies[i]; %>
<div class="quiz-question clearfix<% if (strategy.selected) { %> strategy-selected<% } %>">
<label>
<input type="radio" name="strategy" value="<%= strategies[i].id %>"
<% if (selectedStrategy) { %>disabled="disabled"<% } %>
<% if (strategy.selected) { %> checked="checked" class="yours" <% } %>
/>
<%= strategy.ordinal %>. <%= strategy.title %>
</label>
</div>
<% } %>
</div>
<br />
<div class="text-center">
<% if (!selectedStrategy) { %>
<button id="select-strategy" class="btn btn-primary">Submit</button>
<% } %>
</div>
</div>