Difference between revisions of "Team:Imperial College/Judges"

 
(137 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<html>
 
<html>
 
<head>
 
<head>
<style>
 
  
</style>
+
<style>
  <script>
+
.floatleft{
     $(function () {
+
text-align:left;
    $('.list-group.checked-list-box .list-group-item').each(function () {
+
}
 +
        </style>
 +
 
 +
    </head>
 +
 
 +
     <body>
 +
 
 +
<div class="container">         
 +
  <div class="content">
 +
      <div class="titleimg">
 +
<br/>
 +
            <h1>For Judges</h1>
 +
 +
    <img src="" alt="" width="22%"; >
 +
  </div>
 +
 
 +
 
 +
<div class="floatleft">
 +
<h4 class="underbold">HUMAN PRACTICES</h4>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Human_Practices" target="_blank"><i onclick="checkBox('box1')" id="box1" class="far fa-square"> HP overview</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/scicomm" target="_blank"><i onclick="checkBox('box2')" id="box2" class="far fa-square"> Communications Strategy Guide</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/ltat" target="_blank"><i onclick="checkBox('box3')" id="box3" class="far fa-square"> Team-communication App</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/IHP" target="_blank"><i onclick="checkBox('box4')" id="box4" class="far fa-square"> Integrated Human Practices</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Public_Engagement" target="_blank"><i onclick="checkBox('box5')" id="box5" class="far fa-square"> Outreach</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Collaborations" target="_blank"><i onclick="checkBox('box6')" id="box6" class="far fa-square"> Collaborations</i></a><br>
 +
 
 +
</div>
 +
 
 +
<div class="floatleft">
 +
<h4 class="underbold">DRY LAB</h4>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Dryover" target="_blank"><i onclick="checkBox('box7')" id="box7" class="far fa-square"> Dry lab overview</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Model" target="_blank"><i onclick="checkBox('box8')" id="box8" class="far fa-square"> Modelling</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Hardware" target="_blank"><i onclick="checkBox('box9')" id="box9" class="far fa-square"> Hardware</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Software" target="_blank"><i onclick="checkBox('box10')" id="box4" class="far fa-square"> Software</i></a><br>
 +
        <a href="https://github.com/icigem?tab=repositories" target="_blank"><i onclick="checkBox('box11')" id="box11" class="far fa-square"> Github</i></a><br>
 +
</div>
 +
 
 +
 
 +
<div class="floatleft">
 +
<h4 class="underbold">WET LAB</h4>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Wetover" target="_blank"><i onclick="checkBox('box13')" id="box13" class="far fa-square"> Wet lab overview</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Demonstrate" target="_blank"><i onclick="checkBox('box14')" id="box14" class="far fa-square"> Results</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Experiments" target="_blank"><i onclick="checkBox('box15')" id="box15" class="far fa-square"> Methods</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Protocols" target="_blank"><i onclick="checkBox('box16')" id="box16" class="far fa-square"> References</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Parts" target="_blank"><i onclick="checkBox('box17')" id="box17" class="far fa-square"> Parts</i></a><br>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Measurement" target="_blank"><i onclick="checkBox('box18')" id="box18" class="far fa-square"> Measurement</i></a><br>
 +
<a href="https://2018.igem.org/Team:Imperial_College/Supplementary" target="_blank"><i onclick="checkBox('box12')" id="box12" class="far fa-square"> Supplementary</i></a><br>
 
          
 
          
        // Settings
+
</div>
        var $widget = $(this),
+
            $checkbox = $('<input type="checkbox" class="hidden" />'),
+
            color = ($widget.data('color') ? $widget.data('color') : "primary"),
+
            style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
+
            settings = {
+
                on: {
+
                    icon: 'glyphicon glyphicon-check'
+
                },
+
                off: {
+
                    icon: 'glyphicon glyphicon-unchecked'
+
                }
+
            };
+
           
+
        $widget.css('cursor', 'pointer')
+
        $widget.append($checkbox);
+
  
        // Event Handlers
+
<div class="floatleft">
         $widget.on('click', function () {
+
<h4 class="underbold">PEOPLE</h4>
            $checkbox.prop('checked', !$checkbox.is(':checked'));
+
         <a href="https://2018.igem.org/Team:Imperial_College/Team" target="_blank"><i onclick="checkBox('box19')" id="box19" class="far fa-square"> Team</i></a><br>
            $checkbox.triggerHandler('change');
+
        <a href="https://2018.igem.org/Team:Imperial_College/Attributions" target="_blank"><i onclick="checkBox('box20')" id="box20" class="far fa-square"> Attributions</i></a><br>
            updateDisplay();
+
         <a href="https://2018.igem.org/Team:Imperial_College/Sponsors" target="_blank"><i onclick="checkBox('box21')" id="box21" class="far fa-square"> Sponsors</i></a><br>
         });
+
  </div>     
        $checkbox.on('change', function () {
+
            updateDisplay();
+
        });
+
         
+
  
        // Actions
 
        function updateDisplay() {
 
            var isChecked = $checkbox.is(':checked');
 
  
            // Set the button's state
+
<div class="floatleft">
            $widget.data('state', (isChecked) ? "on" : "off");
+
<h4 class="underbold">APPLICATIONS</h4>
 +
        <a href="https://2018.igem.org/Team:Imperial_College/Applied_Design" target="_blank"><i onclick="checkBox('box25')" id="box25" class="far fa-square"> Applications</i></a><br>
  
            // Set the button's icon
+
       
            $widget.find('.state-icon')
+
</div>
                .removeClass()
+
                .addClass('state-icon ' + settings[$widget.data('state')].icon);
+
  
            // Update the button's color
+
<div class="floatleft">
            if (isChecked) {
+
                $widget.addClass(style + color + ' active');
+
            } else {
+
                $widget.removeClass(style + color + ' active');
+
            }
+
        }
+
  
        // Initialization
+
<h4 class="underbold">Parts</h4>
         function init() {
+
         <a href="https://2018.igem.org/Team:Imperial_College/Part_Collection" target="_blank"><i onclick="checkBox('box31')" id="box31" class="far fa-square"> Part Collection</i></a><br>
           
+
        <a href="https://2018.igem.org/Team:Imperial_College/Improve" target="_blank"><i onclick="checkBox('box32')" id="box32" class="far fa-square">Improved Part</i></a><br>
            if ($widget.data('checked') == true) {
+
        <a href="hhttps://2018.igem.org/Team:Imperial_College/Basic_Part" target="_blank"><i onclick="checkBox('box33')" id="box33" class="far fa-square"> Basic Part</i></a><br>
                $checkbox.prop('checked', !$checkbox.is(':checked'));
+
        </a><br>
            }
+
           
+
            updateDisplay();
+
  
            // Inject the icon if applicable
+
          
            if ($widget.find('.state-icon').length == 0) {
+
</div>
                $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
+
            }
+
         }
+
        init();
+
    });
+
   
+
    $('#get-checked-data').on('click', function(event) {
+
        event.preventDefault();
+
        var checkedItems = {}, counter = 0;
+
        $("#check-list-box li.active").each(function(idx, li) {
+
            checkedItems[counter] = $(li).text();
+
            counter++;
+
        });
+
        $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
+
    });
+
});</script>
+
  
+
<div class="clr"></div>
</head>
+
  
<body>
+
  <script type="text/javascript" language="JavaScript">
  <div class="container">         
+
  <div class="content">
+
      <div class="titleimg">
+
<br/>
+
            <h1>For Judges</h1>
+
            <br/>
+
            <br/>
+
    <img src="" alt="" width="20%"; >
+
  </div>
+
  
              
+
             function checkBox(id){
                                <div class="row">
+
                var list = document.getElementById(id);
                                    <div class="col-xs-6">
+
               
                                        <h3 class="text-center">WET LAB</h3>
+
                if (list.className == "fas fa-check-square"){
                                        <div class="well" style="max-height: 300px;overflow: auto;">
+
                    list.className = "far fa-square";
                                            <ul class="list-group checked-list-box">
+
                }
                                              <li class="list-group-item">Cras justo odio</li>
+
                else{
                                              <li class="list-group-item" data-checked="true">Dapibus ac facilisis in</li>
+
                    list.className = "fas fa-check-square";
                                              <li class="list-group-item">Morbi leo risus</li>
+
                }
                                              <li class="list-group-item">Porta ac consectetur ac</li>
+
 
                                              <li class="list-group-item">Vestibulum at eros</li>
+
            }
                                              <li class="list-group-item">Cras justo odio</li>
+
                                              <li class="list-group-item">Dapibus ac facilisis in</li>
+
                                              <li class="list-group-item">Morbi leo risus</li>
+
                                              <li class="list-group-item">Porta ac consectetur ac</li>
+
                                              <li class="list-group-item">Vestibulum at eros</li>
+
                                            </ul>
+
                                        </div>
+
                                    </div>
+
                                 
+
                                <div class="row">
+
                                    <div class="col-xs-6">
+
                                        <h3 class="text-center">DRY LAB</h3>
+
                                        <div class="well" style="max-height: 300px;overflow: auto;">
+
                                            <ul class="list-group checked-list-box">
+
                                              <li class="list-group-item" data-style="button">Cras justo odio</li>
+
                                              <li class="list-group-item" data-style="button" data-color="success">Dapibus ac facilisis in</li>
+
                                              <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li>
+
                                              <li class="list-group-item" data-style="button" data-color="warning">Porta ac consectetur ac</li>
+
                                              <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li>
+
                                              <li class="list-group-item">Cras justo odio</li>
+
                                              <li class="list-group-item">Dapibus ac facilisis in</li>
+
                                              <li class="list-group-item">Morbi leo risus</li>
+
                                              <li class="list-group-item">Porta ac consectetur ac</li>
+
                                              <li class="list-group-item">Vestibulum at eros</li>
+
                                            </ul>
+
                                        </div>
+
                                    </div>
+
                                    <div class="col-xs-6">
+
                                        <h3 class="text-center">HUMAN PRACTICES</h3>
+
                                        <div class="well" style="max-height: 300px;overflow: auto;">
+
                                            <ul class="list-group checked-list-box">
+
                                              <li class="list-group-item" data-style="button">Cras justo odio</li>
+
                                              <li class="list-group-item" data-color="success">Dapibus ac facilisis in</li>
+
                                              <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li>
+
                                              <li class="list-group-item" data-color="warning">Porta ac consectetur ac</li>
+
                                              <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li>
+
                                            </ul>
+
                                        </div>
+
                                    </div>
+
                                    <div class="col-xs-6">
+
                                            <h3 class="text-center">PEOPLE</h3>
+
                                            <div class="well" style="max-height: 300px;overflow: auto;">
+
                                                <ul class="list-group checked-list-box">
+
                                                  <li class="list-group-item" data-style="button">Cras justo odio</li>
+
                                                  <li class="list-group-item" data-color="success">Dapibus ac facilisis in</li>
+
                                                  <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li>
+
                                                  <li class="list-group-item" data-color="warning">Porta ac consectetur ac</li>
+
                                                  <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li>
+
                                                </ul>
+
                                            </div>
+
                                        </div>
+
                                </div>
+
                            </div>
+
        </div>
+
         
+
  
 +
        </script>
 
</div>
 
</div>
 
</body>
 
</body>

Latest revision as of 13:30, 2 November 2018


For Judges

APPLICATIONS

Applications