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

 
(134 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<html>
 
<html>
 
<head>
 
<head>
−
<style>
+
 
−
.list-group-item{
+
<style>  
−
          font-size:12px;
+
.floatleft{
 +
text-align:left;
 
}
 
}
−
</style>
+
        </style>
−
  <script>
+
 
−
     $(function () {
+
    </head>
−
    $('.list-group.checked-list-box .list-group-item').each(function () {
+
 
 +
     <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>
+
  
−
         
+
            }
  
 +
        </script>
 
</div>
 
</div>
 
</body>
 
</body>

Latest revision as of 13:30, 2 November 2018


For Judges

HUMAN PRACTICES

HP overview
Communications Strategy Guide
Team-communication App
Integrated Human Practices
Outreach
Collaborations

DRY LAB

Dry lab overview
Modelling
Hardware
Software
Github

WET LAB

Wet lab overview
Results
Methods
References
Parts
Measurement
Supplementary

PEOPLE

Team
Attributions
Sponsors

APPLICATIONS

Applications

Parts

Part Collection
Improved Part
Basic Part