Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Footnote between navigation button and progress bar

Hi,

I have the following 'expand and collapse' logic syntax. I want to add this footnote in between navigation button and progress bar. Is it possible?

Also, I want to show this footnote only in ACBC section and want to hide in other questions.

<!DOCTYPE html>
<html lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" background-color="#E0E0E0">
<head>

<link rel="stylesheet" href="[%GraphicsPath()%]DesN.css">

<script>jQuery( document ).ready(function() {
    jQuery("#proxy_btnApplying").click(function () {
        jQuery('#proxy_collapseHowToApply').collapse('show');
        jQuery('html, body').animate({
            scrollTop: jQuery('#proxy_collapseHowToApply').offset().top
        }, 500);
    });
 
    jQuery("#proxy_btnFunding").click(function () {
        jQuery('#proxy_collapsefunding').collapse('show');
        jQuery('html, body').animate({
            scrollTop: jQuery('#proxy_collapsefunding').offset().top
        }, 500);
    });
 
    jQuery("#proxy_btnExpandAll").click(function () {
        jQuery('#proxy_programmeAccordion .panel-collapse').collapse('show');
        jQuery('#proxy_applicationsAccordion .panel-collapse').collapse('show');
    });
 
    jQuery("#proxy_btnContractAll").click(function () {
        jQuery('#proxy_programmeAccordion .panel-collapse').collapse('hide');
        jQuery('#proxy_applicationsAccordion .panel-collapse').collapse('hide');
    });
 
   jQuery('.panel-collapse').on('hidden.bs.collapse', function () {
        var icon = jQuery(this).prev().children().children("a").children("span");
        icon.removeClass("glyphicon-minus-sign");
        icon.addClass("glyphicon-plus-sign");
    });
 
    jQuery('.panel-collapse').on('shown.bs.collapse', function () {
        var icon = jQuery(this).prev().children().children("a").children("span");
        icon.removeClass("glyphicon-plus-sign");
        icon.addClass("glyphicon-minus-sign");
    });
 
});</script>
<script src="https://www.ed.ac.uk/files/js/js_gPqjYq7fqdMzw8-29XWQIVoDSWTmZCGy9OqaHppNxuQ.js"></script>
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","https://www.ed.ac.uk/files/googleanalytics/analytics.js?p0hwmj","ga");ga("create", "UA-3415584-4", {"cookieDomain":"auto"});ga("send", "pageview");</script>
<script src="[%GraphicsPath()%]Bt.js"></script>


</head>
<body>

<font color="#003366">
<font size="3">
<html color="#C3C3C3;">




    <div id="proxy_accordionButtonsContainer" class="row">
      <div class="col-md-12">
        <div class="btn-group pull-right" role="group" aria-label="expand or contract accordions" style="float:left;">
          <button id="proxy_btnExpandAll" type="button" class="btn btn-uoe"><font color="#023365"><b>Expand all </b><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></font></span></button>
          <button id="proxy_btnContractAll" type="button" class="btn btn-uoe"><font color="#023365"><b>Collapse all </b><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></font></span></button>
        </div>
      </div>
    </div><br>
    
                 <!-- Header 1 starts here -->
    
      
            <div class="panel-group" id="proxy_programmeAccordion" width="70%">
              <div class="panel">
                <div class="panel-heading">
     <h2 class="panel-title"><a data-toggle="collapse" data-parent="#programmeAccordion" href="#H1"><span class="glyphicon glyphicon-plus-sign pull-right"></span><b>Base System:</b></a></h2>
                </div>
                <div id="H1" class="panel-collapse collapse">
                      <div class="panel-body">
<p></p>
The base system has enough capacity to store a minimum of 3 days’ supply of 2,000 line items (non-refrigerated/non-narcotics) for a 350 staffed bed hospital in a footprint of 18’ by 12’. Additional capacity can be added to meet the needs of bigger hospitals/systems
<p>The base system of the central pharmacy medication robot has the following functionality:</p>
<ul style="line-height:1.4;">
<li>Receives orders and dispenses medications for:
    <ul style="line-height:1.4;"><li type="square">Scheduled cabinet restocks as well as stockouts</li>
    <li type="square">Scheduled patient fill (cartfill)</li>
    <li type="square">STAT/NOW/First Doses</li>
    <li type="square">Bulk filling for satellite inventory locations (clinics, satellite pharmacies etc.)</li></ul>
</li>
</ul>

           

</body>
</html>

asked Feb 15 by Abdul Bronze (1,655 points)

1 Answer

0 votes
jQuery's "before" and "after" functions can be helpful in moving elements to specific spots on the page.  Experiment with something like this:

$('.submit_div').after($('#proxy_accordionButtonsContainer'));


This CSS selector will grab any questions on the page that are part of your exercise:

.question[id^=ExerName_]


So a conditional like this can be used to make code only run if an exercise question exists on the page:

if ($('.question[id^=ExerName_]').length) {
    ...
}


Of course, "ExerName" should be replaced with the name of your exercise.
answered Feb 15 by Zachary Platinum Sawtooth Software, Inc. (89,975 points)
...