chart_june16_tabbed

chart_june16_tabbed.markdown

chart_june16_tabbed

A Pen by james thomas on CodePen.

License.

index.html

<div class="tab_container">
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1"><i class="fa fa-code"></i><span>Growth </span></label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2"><i class="fa fa-pencil-square-o"></i><span>College Leadership Experiences</span></label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3"><i class="fa fa-bar-chart-o"></i><span>Pre-College Leadership Experiences</span></label>

  <input id="tab4" type="radio" name="tabs">
  <label for="tab4"><i class="fa fa-folder-open-o"></i><span>Socio-Cultural Conversations</span></label>

  <input id="tab5" type="radio" name="tabs">
  <label for="tab5"><i class="fa fa-envelope-o"></i><span>Impact of Mentors</span></label>
  <section id="content1" class="tab-content">
    <h3>Growth</h3>
<canvas id="myChart" width="400" height="100"></canvas>
    <p style="text-align:center">OSU students are reporting similarly to other institutions who participated in the 2015 MSL. Overall, the more students responded “Often” or “Much of the Time” on the Social Change Model scored significantly higher on the key-input and environmental
      measures than students who were not as involved and responded “Never” or “Once.”
    </p>
  </section>
  <section id="content2" class="tab-content">

<!--This is where College Leadership Experiences starts -->

    <h3>College Leadership Experiences</h3>
    <p>Students in the comparison group who reported participating in a formal leadership training or program at least once, showed a considerably higher mean score across the Social Change Model of Leadership outcomes than both the OSU random sample and
      the national sample. (insert table 3) Unfortunately, 79% of respondents answered, "Never" to the question, "Since starting college, have you ever participated in a leadership training or leadership education experience of any kind?"</p>
  </section>

<!-- Pre-College Leadership Experiences Begin -->

  <section id="content3" class="tab-content">
    <h3>Pre-College Leadership Experiences</h3>
    <p>Overall, students who responded "very often" to participating in pre-college leadership experiences were more likely to participate in leadership experiences in college. </p>
</section>
  <section id="content4" class="tab-content">
    <h3>Socio-Cultural Conversations</h3>

    <p>Overall, engaging in socio-cultural conversations with peers was a significant predictor for all six leadership capacities and a strong environmental predictor of growth across the Social Change Model values. Students who reported “often” scored significantly
      higher on all SCM than their peers who responded “sometimes,” “once,” and “never”.
      <p>According to research by Hurtado (2006), “Attention to diversity in the curriculum and co-curriculum, particularly in the first two years of college, results in student development along many dimensions of complex thinking and social cognitive growth”.
        In addition, several researchers have found that student’s interpersonal environments (including interactions with others) have the greatest impact on changes in values, attitudes, beliefs, and actions (Astin, 1993; Pascarella & Terenzini, 1991;
        Terenzini, Pascarella & Blimling, 1996).</p>
    <style>
.container {
  width: 80%;
  padding: 0px 35px;
}

.p {
  text-align: center;
  font-size: 14px;
  padding-top: 140px;
}
</style>
<div class="container">
  <h2>Socio-Cultural Conversations</h2>
  <div>
    <canvas id="scatterChart"></canvas>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<script>
  var ctx = document.getElementById("scatterChart");
var scatterChart = new Chart(ctx, {
    type: 'line', 
    data: {
        labels: ["never", "once", "sometimes", "often"],
        datasets: [{
            label: 'Consciousness of Self', borderColor: "rgba(121,127,205,1)",
            data: [{
                x: 0,
                y: 3.78
            }, {
                x: 1,
                y: 3.87
            }, {
                x: 2,
                y: 4.04
            }, {
                x: 3,
                y: 4.4
            }], fill: false
        }, {
            label: 'Congruence', borderColor: "rgba(121,127,205,1)",
            data: [{
                x: 0,
                y: 3.99
            }, {
                x: 1,
                y: 4.1
            }, {
                x: 2,
                y: 4.26
            }, {
                x: 3,
                y: 4.53
            }], fill: false
        }, {
            label: 'Commitment',borderColor: "rgba(121,127,205,1)",
            data: [{
                x: 0,
                y: 4.27
            }, {
                x: 1,
                y: 4.28
            }, {
                x: 2,
                y: 4.43
            }, {
                x: 3,
                y: 4.66
            }], fill: false
        }, {
            label: 'Collaboration',borderColor: "rgba(121,127,205,1)",
            data: [{
                x: 0,
                y: 3.89
            }, {
                x: 1,
                y: 4.01
            }, {
                x: 2,
                y: 4.19
            }, {
                x: 3,
                y: 4.53
            }], fill: false
        }, {
            label: 'Controversy with Civility',borderColor: "rgba(121,127,205,1)",
            data: [{
                x: 0,
                y: 3.88
            }, {
                x: 1,
                y: 4.03
            }, {
                x: 2,
                y: 4.28
            }, {
                x: 3,
                y: 4.64
            }], fill: false
        }, {
            label: 'Citizenship',borderColor: "rgba(121,127,205,1)",
            data: [{
                x: 0,
                y: 3.45
            }, {
                x: 1,
                y: 3.69
            }, {
                x: 2,
                y: 3.9
            }, {
                x: 3,
                y: 4.33
            }], fill: false
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'category',
                position: 'bottom'
            }]
        }
    }
});
</script>
  </section>

  <section id="content5" class="tab-content">
    <p data-height="744" data-theme-id="23930" data-slug-hash="EyydXx" data-default-tab="result" data-user="postmodernpast" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/postmodernpast/pen/EyydXx/">multiple_color_colum_june15</a> by james thomas (<a href="http://codepen.io/postmodernpast">@postmodernpast</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

script.js

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["", "","","",""],
    datasets: [{
      label: 'comparison sample',
      data: [4.17, 4.33, 4.44, 4.29, 4.31, 4.25, 4.2],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }, {
      label: 'main sample',
      data: [3.98, 4.19, 4.38, 4.13, 4.18, 3.81, 4.11],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    },]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>

style.css

.node-type-feature-page .field-name-field-introduction .field-item, .node-type-feature-page .field-name-field-section-content .field-item {
    padding: 25px;
}
/*#page-title {
    font-size: 26px;
display: none;
}*/

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

.node-type-feature-page .field-name-field-introduction .field-item {
    line-height: 1.5;
}
 .stylethecount {position: relative; right: 18px;}
 .seperatewrapper {
   width: 100%;
   margin: 20px auto;
   position: relative;
   border-radius: 6px;
   display: inline-flex;
   flex-direction: row;
   flex-wrap: wrap;
 }
 
 .col_two_left {
   margin: 12px;
   padding: 12px;
   text-align: center;
   -webkit-flex: 1 1 30%;
   flex: 1 1 30%;
   -webkit-order: 2;
   order: 2;
   width: 200px;
 }
 
 .col_two_right {
   margin: 12px;
   padding: 12px;
   text-align: center;
   -webkit-flex: 1 1 30%;
   flex: 1 1 30%;
   -webkit-order: 2;
   order: 2;
   width: 200px;
 }
 
 .wrapper {
   width: 100%;
   margin: 30px auto;
   position: relative;
   display: inline-flex;
   flex-direction: row;
   flex-wrap: wrap;
 }
 
 .col_fourth {
   margin: 12px;
   padding: 12px;
   border: 2px solid rgba(195, 69, 0, 1.00);
   border-radius: 16pt;
   text-align: center;
   -webkit-flex: 1 1 30%;
   flex: 1 1 30%;
   -webkit-order: 2;
   order: 2;
   width: 200px;
 }
 
 .col_fourth_added1 {
   padding: 20px;
   border-radius: 9pt;
   text-align: center;
   -webkit-flex: 1 1 30%;
   flex: 1 1 30%;
   -webkit-order: 2;
   order: 2;
   width: 200px;
 }

 .col_fourth_added2 {
   padding: 12px;
   border-radius: 9pt;
   text-align: center;
   -webkit-flex: 1 1 30%;
   flex: 1 1 30%;
   -webkit-order: 2;
   order: 2;
   width: 200px;
 }
 
 .counter {
   background-color: #ffffff;
   padding: 2px 0;
   border-radius: 5px;
 }
 
 .count-title {
   font-size: 40px;
   text-align: center;
 }
 
 .count-text {
   font-size: 22px;
   text-align: center;
 }
 
 .fa-2x {
   margin: 0 auto;
   float: none;
   display: table;
   color: #4ad1e5;
 }
 
 *,
 *:after,
 *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
 .clearfix:before,
 .clearfix:after {
   content: " ";
   display: table;
 }
 
 .clearfix:after {
   clear: both;
 }
 
/* h1 {
   color: #ccc;
   text-align: center;
 }
*/
 a {
   /*color: #ccc;*/
   text-decoration: none;
   outline: none;
 }
 /*Fun begins*/
 
 .tab_container {
   width: 90%;
   margin: 0 auto;
   padding-top: 70px;
   position: relative;
 }
 
 input,
 section {
   clear: both;
   padding-top: 10px;
   display: none;
 }
 
 label {
   font-weight: 700;
   font-size: 18px;
   display: block;
   float: left;
   width: 20%;
   padding: 1.5em;
   color: #757575;
   cursor: pointer;
   text-decoration: none;
   text-align: center;
   background: #f0f0f0;
 }
 
 #tab1:checked ~ #content1,
 #tab2:checked ~ #content2,
 #tab3:checked ~ #content3,
 #tab4:checked ~ #content4,
 #tab5:checked ~ #content5 {
   display: block;
   padding: 20px;
   background: #fff;
   color: #999;
   border-bottom: 2px solid #f0f0f0;
 }
 
 .tab_container .tab-content p,
 .tab_container .tab-content h3 {
   -webkit-animation: fadeInScale 0.7s ease-in-out;
   -moz-animation: fadeInScale 0.7s ease-in-out;
   animation: fadeInScale 0.7s ease-in-out;
 }
 
 .tab_container .tab-content h3 {
   text-align: center;
 }
 
 .tab_container [id^="tab"]:checked + label {
   background: #fff;
   box-shadow: inset 0 3px #0CE;
 }
 
 .tab_container [id^="tab"]:checked + label .fa {
   color: #0CE;
 }
 
 label .fa {
   font-size: 1.3em;
   margin: 0 0.4em 0 0;
 }
 /*Media query*/
 
 @media only screen and (max-width: 900px) {
   label span {
     display: none;
   }
   .tab_container {
     width: 98%;
   }
 }
 /*Content Animation*/
 
 @keyframes fadeInScale {
   0% {
     transform: scale(0.9);
     opacity: 0;
   }
   100% {
     transform: scale(1);
     opacity: 1;
   }
 }
 
 .no_wrap {
   text-align: center;
   color: #0ce;
 }
 
 .link {
   text-align: justify;
 }