RDW - ICA Report / ELA

In this example below you will see how to do a RDW - ICA Report / ELA with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by asleepy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright asleepy ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>RDW - ICA Report / ELA</title>
  
  
  <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1501143/rdw-styles.8b7062f3317bb7eed195.bundle.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="header">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1501143/sbac%20logo%20color.svg" alt="Smarter Balanced Assessment Consortium" class="logo">
	<div class="block-group blue">
		<span>ICA</span>
		<span>Interim Comprehensive Assessment Report</span>
	</div>
	<div class="block-group blue">
		<span>ELA/Literacy</span>
		<span>2016 - 17</span>
	</div>
</div>

<div class="overview">
	<div class="info">
		<div class="name">{{LastName}}, {{FirstName}}</div>
		<div class="grade">Grade {{Grade}}</div>
		<div class="school">{{Institution Name}}</div>
		<div class="district">{{District Name}}, {{State}}</div>
	</div>
	<div class="standard">
		<span class="score" style="background-color:var(--s-lvl-4);">{{Score}}</span>
		<span class="level"><strong>{Level Label}</strong><br>{{Min}}-{{Max}}</span>
		<span class="description">{{FirstName}} {{Achievement Level Description}} Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt rem, ipsum, distinctio cupiditate laudantium alias culpa ratione, quis quas quae quod nam. Temporibus delectus et doloremque sunt, totam pariatur nihil.</span>
	</div>
	<div class="performance">
		<div class="graph">
			<span class="score" data-left="75"><span class="num" style="background-color: var(--s-lvl-4);">{{Score}}<span class="error">┬▒ {{ERR}}*</span></span></span>
			<span class="bound">{{bound}}</span>
			<div class="bar" style="background-color: var(--s-lvl-1);" data-width="25"><span class="bound">{{bound}}</span></div>
			<div class="bar" style="background-color: var(--s-lvl-2);" data-width="25"><span class="bound">{{bound}}</span></div>
			<div class="bar" style="background-color: var(--s-lvl-3);" data-width="25"><span class="bound">{{bound}}</span></div>
			<div class="bar" style="background-color: var(--s-lvl-4);" data-width="25"><span class="bound">{{bound}}</span></div>
		</div>
		<div class="legend">
			<span><i class="fa fa-square" style="color: var(--s-lvl-1);"></i> Standard Not Met</span>
			<span><i class="fa fa-square" style="color: var(--s-lvl-2);"></i> Standard Nearly Met</span>
			<span><i class="fa fa-square" style="color: var(--s-lvl-3);"></i> Standard Met</span>
			<span><i class="fa fa-square" style="color: var(--s-lvl-4);"></i> Standard Exceeded</span>
		</div>
	</div>
</div>

<div class="achievement-descriptions">
	<div class="overall">
		<span class="title">Student Achievement by Claim</span>
		<p>{{FirstName}} {{Overall Achievement Description}} Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt rem, ipsum, distinctio cupiditate laudantium alias culpa ratione, quis quas quae quod nam. Temporibus delectus et doloremque sunt, totam pariatur nihil.</p>
	</div>
	<div class="level-description">
		<span class="title"><i class="fa fa-book"></i> Reading</span>
		<span class="level-label" style="background-color: var(--s-lvl-4)">{{Level Label}}</span>
		<div class="description">
			<p>{{FirstName}} {{Category Specific Achievement Level Description}} Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt rem, ipsum, distinctio cupiditate laudantium alias culpa ratione, quis quas quae quod nam. Temporibus delectus et doloremque sunt, totam pariatur nihil.</p>
		</div>
	</div>
	<div class="level-description">
		<span class="title"><i class="fa fa-lightbulb-o"></i> Listening</span>
		<span class="level-label" style="background-color: var(--s-lvl-4)">{{Level Label}}</span>
		<div class="description">
			<p>{{FirstName}} {{Category Specific Achievement Level Description}} Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt rem, ipsum, distinctio cupiditate laudantium alias culpa ratione, quis quas quae quod nam. Temporibus delectus et doloremque sunt, totam pariatur nihil.</p>
		</div>
	</div>
	<div class="level-description">
		<span class="title"><i class="fa fa-question"></i> Research &amp; Inquiry</span>
		<span class="level-label" style="background-color: var(--s-lvl-4)">{{Level Label}}</span>
		<div class="description">
			<p>{{FirstName}} {{Category Specific Achievement Level Description}} Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt rem, ipsum, distinctio cupiditate laudantium alias culpa ratione, quis quas quae quod nam. Temporibus delectus et doloremque sunt, totam pariatur nihil.</p>
		</div>
	</div>
	<div class="level-description">
		<span class="title"><i class="fa fa-edit"></i> Writing</span>
		<span class="level-label" style="background-color: var(--s-lvl-4)">{{Level Label}}</span>
		<div class="description">
			<p>{{FirstName}} {{Category Specific Achievement Level Description}} Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt rem, ipsum, distinctio cupiditate laudantium alias culpa ratione, quis quas quae quod nam. Temporibus delectus et doloremque sunt, totam pariatur nihil.</p>
		</div>
	</div>
	<div class="writing-traits">
		<span class="title">{{Writing Type}} Writing</span>
		<div class="trait">
			<span class="title">Evidence / Elaboration</span>
			<span class="score"><span style="background-color: var(--s-lvl-4);">3</span> of 4</span>
			<div class="description"><p>{{Trait Specific Achievement Level Description}} Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
		</div>
		<div class="trait">
			<span class="title">Organization / Purpose</span>
			<span class="score"><span style="background-color: var(--s-lvl-4);">3</span> of 4</span>
			<div class="description"><p>{{Trait Specific Achievement Level Description}} Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
		</div>
		<div class="trait">
			<span class="title">Conventions</span>
			<span class="score"><span style="background-color: var(--s-lvl-4);">3</span> of 4</span>
			<div class="description"><p>{{Trait Specific Achievement Level Description}} Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div>
		</div>
	</div>
</div>

<div class="footer">
	<div class="col">
	<p><strong>Take the Test</strong><br>
Gain familiarity with the types of questions and tools for students by taking a practice test: 
<a href="http://www.smarterbalanced.org/assessments/practice-and-training-tests" target="_blank">http://www.smarterbalanced.org/assessments/practice-and-training-tests</a></p>
<p>These results represent only one indicator of a student&rsquo;s performance. These results should be used along with other information, such as classwork and other tests when making educational decisions. Specific questions about individual student results should be directed to the student&rsquo;s teacher.</p>
		</div>
	<div class="col">
		<p><strong>Important Information About Interim Assessments</strong><br>
Interim assessments may be scored by local teachers. This scoring is not subject to the rigorous controls used in summative assessment and local results may show some variations. Exposure to, and familiarity with test questions may affect student performance and the accuracy of interim results.</p>
	</div>
	<div class="col">
		<p><strong>* Error Band</strong><br>
A student&rsquo;s test score can vary if the test is taken several times. If this student was tested again, it is likely that the scale score would fall within this range.</p>
		<p><strong>Frequently Asked Questions</strong><br>
Where can I find more information about the Smarter Balanced Assessment System? Information about Smarter Balanced Assessment System is available at <a href="http://www.smarterbalanced.org/" target="_blank">www.smarterbalanced.org</a>.</p>
	</div>
</div>

<div class="sub-footer">
	<p>&copy; The Regents of the University of California &ndash; Smarter Balanced Assessment Consortium</p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/asleepy/rdw-ica-report-ela-BxmVwZ */
:root {
  --base-font-size: 1.1rem;
  --spacer: calc(var(--base-font-size)*2);
  --base-radius: calc(var(--base-font-size)/2);
  --font-family: var(--font-family-sans);
  --font-family-sans: 'PT Sans', sans-serif;
  --font-family-serif: 'PT Serif', serif;
  --border-color: #DBDBDB;
  --background-gray: #EDEDED;
  --base-font-color: #353538;
  --light-font: #64666A;
  --link-color: #3696E6;
  --s-lvl-1: #8D1135;
  --s-lvl-2: #353538;
  --s-lvl-3: #406934;
  --s-lvl-4: #104564;
}

body {
  font-size: var(--base-font-size);
  padding: var(--spacer);
  font-family: var(--font-family);
  color: var(--base-font-color);
  background-color: white;
}

a, a:visited, a:active {
  color: #3696E6;
}

.header {
  display: grid;
  width: 100%;
  grid-gap: var(--spacer);
  grid-template-columns: -webkit-max-content -webkit-max-content 1fr;
  grid-template-columns: max-content max-content 1fr;
  align-items: center;
  margin-bottom: calc(var(--spacer)*1.5);
}
.header .logo {
  height: calc(var(--spacer)*1.5);
}
.header .block-group:last-child {
  justify-self: end;
}

.block-group {
  font-family: var(--font-family-sans);
  line-height: 1em;
  background-color: transparent;
}
.block-group span {
  display: inline-block;
  padding: 0.25em 0.5em;
  color: white !important;
}
.block-group.blue {
  background-color: #014F9A;
}
.block-group.blue span:nth-child(2n) {
  background-color: #3696E6;
  border-left: 1px solid white;
}

.overview {
  position: relative;
  border-width: 1px 0;
  border-style: solid;
  border-color: var(--border-color);
  padding: var(--spacer) 0;
  margin-bottom: calc(var(--spacer)*1.5);
  display: grid;
  grid-gap: var(--spacer);
  grid-template-columns: repeat(2, auto) minmax(50%, 1fr);
}
.overview .info .name {
  position: absolute;
  font-size: calc(var(--base-font-size)*2);
  font-weight: 700;
  top: -1em;
  background-color: white;
  padding-right: 0.5em;
}
.overview .info .grade {
  font-weight: 700;
}
.overview .info .district {
  color: var(--light-font);
  font-size: calc(var(--base-font-size)*0.8);
}
.overview .standard {
  display: grid;
  grid-gap: calc(var(--spacer)/2);
  grid-template-columns: -webkit-min-content 1fr;
  grid-template-columns: min-content 1fr;
  grid-template-rows: -webkit-min-content 1fr;
  grid-template-rows: min-content 1fr;
}
.overview .standard .score {
  font-size: calc(var(--base-font-size)*1.4);
  background-color: gray;
  color: white;
  padding: 0.5em 0.75em;
  border-radius: var(--base-radius);
}
.overview .standard .level {
  font-size: calc(var(--base-font-size)*0.8);
}
.overview .standard .description {
  grid-column: 1/-1;
  padding-right: 2em;
}

.graph {
  position: relative;
  display: flex;
  width: calc(100% - 20ch);
  margin-top: 4em;
  margin-bottom: 5em;
}
.graph .score {
  position: absolute;
  top: calc(-100% - 3em);
  display: block;
}
.graph .score .num {
  position: relative;
  display: inline-block;
  font-size: calc(var(--base-font-size)*1.4);
  background-color: gray;
  color: white;
  padding: 0.5em 0.75em;
  margin-right: 0.25em;
  border-radius: var(--base-radius);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.graph .score .num .error {
  position: absolute;
  top: 0;
  left: calc(100% + 0.5em);
  display: block;
  font-size: calc(var(--base-font-size)*1.4);
  color: var(--light-font);
  white-space: nowrap;
  padding-top: 0.5em;
}
.graph .score .num:before {
  content: '';
  position: absolute;
  bottom: -1em;
  left: 50%;
  display: block;
  width: 1px;
  height: 1em;
  background-color: #979797;
}
.graph .bound {
  position: absolute;
  top: calc(100% + 1em);
  left: 0;
  display: block;
  border-radius: var(--base-radius);
  padding: 0.5em 0.75em;
  background-color: var(--background-gray);
  font-size: calc(var(--base-font-size)*0.8);
  font-weight: 700;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.graph .bound:before {
  content: '';
  position: absolute;
  top: -1em;
  left: 50%;
  display: block;
  width: 1px;
  height: 1em;
  background-color: #979797;
}
.graph .bar {
  position: relative;
  display: inline-block;
  height: 2rem;
  margin-left: 1px;
}
.graph .bar:nth-child(3) {
  margin-left: 0;
  border-radius: var(--base-radius) 0 0 var(--base-radius);
}
.graph .bar:last-child {
  border-radius: 0 var(--base-radius) var(--base-radius) 0;
}
.graph .bar .bound {
  left: auto;
  right: 0;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}

.legend {
  margin-top: calc(var(--spacer)/2);
}
.legend span {
  display: inline-block;
  margin-left: calc(var(--spacer)/2);
  color: var(--light-font);
}
.legend span:first-child {
  margin-left: 0;
}

.achievement-descriptions {
  display: grid;
  grid-gap: var(--spacer);
  grid-template-columns: repeat(3, 1fr);
}
.achievement-descriptions .overall {
  grid-column: 1 / -1;
}
.achievement-descriptions .overall .title {
  display: block;
  font-size: calc(var(--base-font-size)*2);
  font-weight: 700;
}
.achievement-descriptions .level-description {
  display: grid;
  grid-gap: calc(var(--spacer)/2);
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, -webkit-min-content);
  grid-template-rows: repeat(2, min-content);
  padding: 1.5em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: var(--base-radius);
  background-color: var(--background-gray);
}
.achievement-descriptions .level-description .title {
  font-size: calc(var(--base-font-size)*1.4);
  font-weight: 700;
}
.achievement-descriptions .level-description .level-label {
  justify-self: end;
  color: white;
  background-color: gray;
  border-radius: var(--base-radius);
  padding: 0.5em;
  line-height: 1;
}
.achievement-descriptions .level-description .description {
  grid-column: 1 / -1;
}
.achievement-descriptions .level-description p:last-child {
  margin-bottom: 0;
}
.achievement-descriptions .writing-traits {
  grid-column: span 2;
  border-bottom: 1px solid var(--border-color);
}
.achievement-descriptions .writing-traits .title {
  font-size: calc(var(--base-font-size)*1.4);
  font-weight: 700;
}
.achievement-descriptions .writing-traits .trait {
  display: grid;
  grid-gap: calc(var(--spacer)/2);
  grid-template-columns: repeat(2, 1fr);
}
.achievement-descriptions .writing-traits .trait .score {
  justify-self: end;
}
.achievement-descriptions .writing-traits .trait .score span {
  color: white;
  border-radius: var(--base-radius);
  padding: 0.5em;
  line-height: 1;
}
.achievement-descriptions .writing-traits .trait .description {
  grid-column: 1 / -1;
}

.footer {
  display: grid;
  grid-gap: var(--spacer);
  grid-template-columns: repeat(3, 1fr);
  padding: var(--spacer) 0;
  border-bottom: 1px solid var(--border-color);
}

.sub-footer {
  padding: var(--spacer) 0;
  text-align: right;
  font-size: calc(var(--base-font-size)*0.8);
  color: var(--light-font);
}

Comments