Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="app" class="app">
  <section  v-show="!askedForResults">  
    <div v-if="!isIdle" class="progress">{{currentIndex+1}} / {{total}}</div>
    <img  alt="Specificity Wars" :class='["logo", !isIdle ? "mini" : ""]' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/logo-specificity-wars.svg" />
    <transition name="fade" mode="out-in">
      <header v-if="isIdle">
        <p class="intro">Your task is to decide which color will be applied to the highlighted element(s).
May The Force Be With You&hellip;</p>
        <button type="button" @click="start">Let's Start!</button>
        <p>I recommend starting with my two other CSS quizzes:</p>
        <ol>
          <li><a target="_blank" href="https://codepen.io/pehaa/pen/ROapJZ">Well Aimed?</a></li>
          <li><a target="_blank" href="https://codepen.io/pehaa/pen/OYLwGW">Can You Count Specificity?</a></li>
        </ol>       
      </header>
      <div class="main-ctnr" v-else>
        <div class="htmlcss">
          <css class="css" :q="proposals" :answers="colorvalues"></css>
          <v-style v-if="!isIdle">.page-doc {{selector}} {
      box-shadow: 0 0 5px 6px #4799e2; padding-top:.5rem; padding-bottom:.5rem;}</v-style>
          <v-style v-if="!isIdle && disabled">{{displayPageDocCSS}}</v-style>
          <pagedoc :class="isAnswered ? 'answered' : 'not-answered'" ref="markup" :markup="templ"></pagedoc>
        </div>
        <question class="answers" :v="v" :q="proposals" :answers="answers" @answered="go" :disabled="disabled" :correct="answer"></question>
        <div class="buttons">
          <transition name="fade">
            <button v-show="shouldShowNext" type="button" @click="displayNext">Next</button>
          </transition>
          <transition name="fade">
            <button v-show="allDone" type="button" @click="showResults">Results</button>
          </transition>
        </div>
        <div :class="['why', answer]" v-if="isAnswered" v-html="why"></div>
      </div>
    </transition>
  </section>
  <transition name="fade2">
    <section class="score" v-show="askedForResults">
      <h1>Your Result is</h1>
      <finalresults :finalpercentage="finalPercentage"></finalresults>
      <button type="button" @click="playAgain">Play Again</button>
      <a class="button" href="https://twitter.com/intent/tweet?text=CSS%20Quiz%20-%20Specificity%20Wars&url=https://codepen.io/pehaa/pen/dEpvXN" target="_blank" rel="noopener noreferrer">Share on Twitter</a>
    </section>
  </transition>
</div>
    
<script type="text/x-template" id="markup">
  <slot name="markup" :markup="markup">
    <div class="page-doc" v-html="markup"></div>
  </slot>
</script>

<script type="text/x-template" id="icon">
  <svg class="specificity" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 20">
    <g>
      <path d="M11,3.47 L8.34,3.47 C7.33333333,3.47 7.18333333,3.74666667 7.89,4.3 C8.95792664,5.04791913 9.63916867,6.2309362 9.75,7.53 C9.75,8.57666667 9.13,9.20333333 7.89,9.41 L0.51,9.41 L0.51,6.89 L5.17,6.89 C6.27666667,6.89 6.41666667,6.58 5.59,5.96 C4.25666667,4.71333333 3.68,3.56333333 3.86,2.51 C3.95991745,1.54802089 4.81733702,0.846901768 5.78,0.94 L11,0.94 L11,3.47 Z"></path>
      <path d="M10.37,9.41 L10.37,1 L15.88,1 C16.4780807,1.0364463 17.0582157,1.21838212 17.57,1.53 C18.0129253,1.81590498 18.3473689,2.24188055 18.52,2.74 C18.6688876,3.19482415 18.7398862,3.6715287 18.73,4.15 C18.7008491,4.44968429 18.6370911,4.74498462 18.54,5.03 C18.3670186,5.40620147 18.1022373,5.73287963 17.77,5.98 C17.2838835,6.36792258 16.6980405,6.61057944 16.08,6.68 L13.43,6.68 L13.43,9.47 L10.37,9.41 Z M13.43,3.06 L13.43,4.62 L15.56,4.62 C15.6932007,4.61280617 15.8215727,4.5677025 15.93,4.49 C16.0633333,4.40333333 16.1333333,4.19 16.14,3.85 C16.154337,3.6122913 16.0671035,3.37966851 15.9,3.21 C15.8028771,3.1214668 15.6804992,3.06552259 15.55,3.05 L13.43,3.06 Z"></path>
      <polygon points="19.16 9.41 19.16 1 26.41 1 26.41 3.52 21.91 3.52 21.91 4.52 24.82 4.52 24.82 6 21.91 6 21.91 7 27.12 7 27.12 9.52"></polygon>
      <path d="M32.83,6.89 L35.48,6.89 L35.48,9.41 L31.73,9.41 C30.8749072,9.4221412 30.0267343,9.25523168 29.24,8.92 C28.5242404,8.6136655 27.9152824,8.10214074 27.49,7.45 C27.0441161,6.73085274 26.8214022,5.89567572 26.85,5.05 C26.8381986,4.43534885 26.9682312,3.82624853 27.23,3.27 C27.4763623,2.75945083 27.8394975,2.31409638 28.29,1.97 C28.7575534,1.61849329 29.2866148,1.35735403 29.85,1.2 C30.4617243,1.02834279 31.0946742,0.944173907 31.73,0.95 L35.48,0.95 L35.48,3.47 L32.83,3.47 C32.3894128,3.46213147 31.9487295,3.47882402 31.51,3.52 C31.2506089,3.55069455 30.9956034,3.61109059 30.75,3.7 C30.5189929,3.78904971 30.315505,3.93735446 30.16,4.13 C29.9513249,4.45058704 29.8465668,4.82771623 29.86,5.21 C29.8439518,5.5894614 29.9490166,5.96419233 30.16,6.28 C30.3293299,6.48914735 30.5602691,6.63960773 30.82,6.71 C31.0820032,6.78228167 31.3496082,6.83245759 31.62,6.86 C31.8733333,6.88 32.2766667,6.89 32.83,6.89 Z"></path>
      <polygon points="35.71 1 38.46 1 38.46 9.46 35.71 9.46"></polygon>
      <polygon points="39.05 9.41 39.05 1 46.3 1 46.3 3.52 41.8 3.52 41.8 4.52 44.71 4.52 44.71 6 41.8 6 41.8 9.49"></polygon>
      <polygon points="46.72 1 49.47 1 49.47 9.46 46.72 9.46"></polygon>
      <path d="M55.75,6.89 L58.4,6.89 L58.4,9.41 L54.65,9.41 C53.7949072,9.4221412 52.9467343,9.25523168 52.16,8.92 C51.4442404,8.6136655 50.8352824,8.10214074 50.41,7.45 C49.9641161,6.73085274 49.7414022,5.89567572 49.77,5.05 C49.7581986,4.43534885 49.8882312,3.82624853 50.15,3.27 C50.3963623,2.75945083 50.7594975,2.31409638 51.21,1.97 C51.6775534,1.61849329 52.2066148,1.35735403 52.77,1.2 C53.3817243,1.02834279 54.0146742,0.944173907 54.65,0.95 L58.4,0.95 L58.4,3.47 L55.75,3.47 C55.3094128,3.46213147 54.8687295,3.47882402 54.43,3.52 C54.1706089,3.55069455 53.9156034,3.61109059 53.67,3.7 C53.4389929,3.78904971 53.235505,3.93735446 53.08,4.13 C52.8713249,4.45058704 52.7665668,4.82771623 52.78,5.21 C52.7639518,5.5894614 52.8690166,5.96419233 53.08,6.28 C53.2493299,6.48914735 53.4802691,6.63960773 53.74,6.71 C54.0020032,6.78228167 54.2696082,6.83245759 54.54,6.86 C54.8066667,6.88 55.21,6.89 55.75,6.89 Z"></path>
      <polygon points="58.63 1 61.38 1 61.38 9.46 58.63 9.46"></polygon>
      <polygon points="69.68 1 69.68 3.52 67 3.52 67 9.46 64.25 9.46 64.25 3.52 61.57 3.52 61.57 1"></polygon>
      <polygon points="72.2 1 73.95 3.61 75.67 1 79 1 75.31 6.36 75.31 9.47 72.54 9.47 72.54 6.36 70.54 3.52 68.78 3.52 68.78 1"></polygon>
      <polygon points="27.51 15.83 26.62 19.42 23.87 19.42 21.28 11 24 11 25.16 14.66 26.16 11 28.69 11 29.87 14.66 30.66 11 33.41 11 31.29 19.46 28.54 19.46"></polygon>
      <path d="M32.18,19.41 L35,11 L39.2,11 L42.03,19.46 L38.83,19.46 L38.3,17.94 L35.79,17.94 L35.26,19.46 L32.18,19.41 Z M37.07,12.82 L35.86,16.17 L38.19,16.17 L37.07,12.82 Z"></path>
      <path d="M41.88,19.41 L41.88,11 L47.39,11 C47.9867668,11.034433 48.5649349,11.2202727 49.07,11.54 C49.518886,11.8275546 49.8681061,12.2466187 50.07,12.74 C50.2187126,13.307079 50.2187126,13.902921 50.07,14.47 C49.9262145,14.86841 49.6689754,15.2160305 49.33,15.47 C48.8762727,15.7853363 48.3621344,16.0032492 47.82,16.11 L48.45,16.92 L53,16.92 L53,19.44 L47.67,19.44 L44.99,16.65 L44.99,19.44 L41.88,19.41 Z M44.94,13.06 L44.94,14.62 L47.07,14.62 C47.2032007,14.6128062 47.3315727,14.5677025 47.44,14.49 C47.5733333,14.4033333 47.6433333,14.19 47.65,13.85 C47.664337,13.6122913 47.5771035,13.3796685 47.41,13.21 C47.3128771,13.1214668 47.1904992,13.0655226 47.06,13.05 L44.94,13.06 Z"></path>
      <path d="M58.21,13.47 L55.55,13.47 C54.5433333,13.47 54.3933333,13.7466667 55.1,14.3 C56.1679266,15.0479191 56.8491687,16.2309362 56.96,17.53 C56.96,18.5766667 56.34,19.2033333 55.1,19.41 L47.72,19.41 L47.72,16.89 L52.38,16.89 C53.4866667,16.89 53.6266667,16.58 52.8,15.96 C51.4666667,14.7133333 50.89,13.5633333 51.07,12.51 C51.1997312,11.5679077 52.0543689,10.8992533 53,11 L58.21,11 L58.21,13.47 Z"></path>
  </g>
  </svg>
</script>


<script type="text/x-template" id="finalresults">
 <div>
   <div class="images">
   <img class="small" alt="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/rebel-alliance-2.svg">
   <img alt="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/rebel-alliance-2.svg">
   <img class="small" alt="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/rebel-alliance-2.svg">
   </div>
   <p>{{finalpercentage}}</p>
  </div>
</script>

              
            
!

CSS

              
                :root {
  --yellow: #FFC62D;
  --black: white;
  --code: 'Code Source Pro', monospace;
  --black: #111111;
  --white: wheat;
}

*, *:before, *:after {
  box-sizing: border-box;
}
html {
  background-color: var(--black);
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1) 90%), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/darth-vader.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  font-family: var(--code);
  line-height: 1.5;
  color: var(--white);
}
@media (min-width: 100em) {
  html {
    font-size: 125%
  }
}
.logo {
  display: block;
  margin: 3rem auto;
  width: 100%;
  max-width: 37.5rem;
  fill: var(--yellow);
  transition: .5s;
}
.mini {
  width: 12rem;
}
.app {
  min-height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.main-ctnr {
  position: relative;
  padding-bottom: 10rem;
}

header {
  width: 100%;
  max-width: 37.5rem;
  margin: 0 auto;
  text-align: center;
}
header .intro {
  font-size: 1.5rem;
}
ol {
  list-style-position: inside;
}
a {
  color: inherit;
}


.quiz p {
  font-size: calc(1rem + .25vw + .5vh);
  padding: 0 1.5rem;
}



.quiz {
  align-items: center;
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--yellow);
  color: #222222;
  padding: 0.25rem 1rem;
  font-family: monospace;
}

button {
  font-family: Montserrat, sans-serif;
  text-transform: uppercase;
  margin: 1.5rem;
  border: 2px solid;
  padding: .875rem 2rem .875rem;
  border-radius: .25rem;
  color: var(--yellow);
  letter-spacing: 2px;
  font-weight: 300;
  cursor: pointer;
  transition: .1s;
  font-size: 1rem;
  line-height: 1;
  background: transparent;
}
button:hover {
  color: #222222;
  background: var(--yellow);
  border-color: var(--yellow);
}

.checked.correct {
  animation: yay 1.5s ease-in-out infinite both;
}
@keyframes yay {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  50% {
    transform: scale(1.3);
    animation-timing-function: ease-out;
  }
}
.checked.wrong {
	animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes shake-horizontal {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    transform: translateX(10px);
  }
  80% {
    transform: translateX(8px);
  }
  90% {
    transform: translateX(-8px);
  }
}
.label-ctnr {
  display: flex;
  justify-content: center;
}
.label-ctnr label {
  position: relative;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  border-radius: 5px;
  font-weight: 700;
  color: var(--white);
  font-size: calc(1.5rem + .25vw + .5vh);
  display: flex;
  align-items: center;
  transition: .3s;
}

.label-ctnr:not(.disabled) label:hover {
  cursor: pointer;
}
.label-ctnr:not(.disabled) label:hover {
  transform: scale(1.1);
}
.label-ctnr input {
  opacity: 0;
  position: absolute;
}
.label-ctnr svg {
  width: 3rem;
  display: block;
}

.path {
  stroke: currentcolor;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}
 .path.line {
    stroke-dashoffset: 1000;
    animation: dash 1s .15s ease-in-out forwards;
  }
.path.line+.path.line {
    animation: dash .9s .35s ease-in-out forwards;
  }
.path.check {
    stroke-dashoffset: -100;
    animation: dash-check .9s .35s ease-in-out forwards;
  }


@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}


@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade2-enter-active, .fade2-leave-active {
  transition: all 1s 0s ;
  transform: scale(1);
}

.fade2-enter, .fade2-leave-to {
  opacity: 0;
  transform: scale(.5);
}

.score { 
  color: var(--yellow);
  z-index: 300;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.score p {
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
}
.score h1 + div {
    position: relative;
    padding: 0 2rem;
    width: 20rem;
    margin-top: 4rem;
    border: 5px solid;
    border-top: none;    
}
.score h1 + div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-left: 1.5rem solid var(--yellow);
  border-right: 1.5rem solid var(--yellow);
}
.score .small {
  width: 4rem;
}
.score .images {
  position: absolute;
  top: -4.5rem;
  padding: 0 .5rem;
  left: 0;
  right: 0;
}
.score button:hover {
  color: #1d1d1d;
  background: var(--yellow);
  border-color: var(--yellow);
}
.helper {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: .25rem;
}
.htmlcss {
    text-align: left;
}
@media (min-width: 48em) {
    .htmlcss {
      display: flex;
      justify-content: center;
      min-height: 20rem;
      width: 98vw; 
  }
}

.htmlcss > * {
  background: black;  
  color: wheat;
  margin: 0 1rem 1rem;
  border: 3px solid var(--yellow);
  border-radius: 3px;  
}
.css {
  padding: 1rem;
}

.page-doc {
  position: relative;
  padding: 0 .25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
pre,
.page-doc *, 
.page-doc *:before,
.page-doc *:after {
  font-family: var(--code)!important; 
  font-weight: normal;
  font-size: calc(1rem + .5vw)!important; 
}


[data-content1]:before {
  content: attr(data-content1)
}
[data-content2]:after {
  content: attr(data-content2)
}
[data-content]:before {
  content: attr(data-content)
}
.not-answered * {
  color: var(--white)!important;
}
.page-doc * {
  margin: .2rem;
  padding: .25rem;
  line-height: 1.2;
  display: block;
}

.page-doc :nth-child(n) > :nth-child(n) {
 margin-left: 2rem;
}
.fakepseudo,
:before,
:after {
  color: var(--white);
  transition: .5s;
}

.answered :before,
.answered :after {
    opacity: .4;
  }
.page-doc input {
  border: 3px inset var(--white);
  background: #262626;
  color: wheat;
  width: calc(100% - 2rem);
}

.buttons {
  height: 6rem
}

.page-doc .fakepseudo {
  display: inline;
  margin: 0!important;
}

.page-doc .fakepseudo .helper {
  display: inline-block;
  margin: 0 0.2rem 0 0.4rem;
}
.why {
  max-width: 30rem;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
}
.why em {
  font-style: normal;
  color: var(--yellow);
}

.why.green strong {
  background: rgba(0,255,0,.5);
}
.why.red strong {
  background: rgba(255,0,0,.5);;
}
              
            
!

JS

              
                const markups = [
  `<section id="section1" class="section1" data-content1='<section id="section1" class="section1">' data-content2="</section>">
      <h2 class="title" data-content1='<h2 class="title">' data-content2="</h2>">About Yoda</h2>
      <p class="intro p1" data-content1='<p class="intro p1">' data-content2="</p>">Paragraph&nbsp;1</p>
      <p class="intro p2" data-content1='<p class="intro p2">' data-content2="</p>">Paragraph&nbsp;2</p>
    </section>`,
    `<section id="section1" class="section1" data-content1='<section id="section1" class="section1">' data-content2="</section>">
      <h2 class="title" data-content1='<h2 class="title">' data-content2="</h2>">About Yoda</h2>
      <p class="green red" data-content1='<p class="green red">' data-content2="</p>">Paragraph</p>
    </section>`,
  `<form id="section1" class="section1" data-content1='<form>' data-content2="</form>">
      <label for="name" data-content1='<label>' data-content2="</label>">Your Name
      <input class="info" type="text" value='<input class="info" type="text">'>
    </label>
    </form>`,
      `<section id="section1" class="section1" data-content1='<section id="section1" class="section1">' data-content2="</section>">
      <h2 class="title" data-content1='<h2 class="title">' data-content2="</h2>">About Yoda</h2>
      <p class="red" data-content1='<p class="red">' data-content2="</p>">Paragraph</p>
    </section>`,
  `<section id="section1" class="section1" data-content1='<section id="section1" class="section1">' data-content2="</section>">
      <h2 class="title" data-content1='<h2 class="title">' data-content2="</h2>">About Yoda</h2>
      <p style="color:green;"><span class="fakepseudo">&lt;p style="color:<span class='helper' style='background:green;'></span>green;"&gt;</span>Paragraph<span class="fakepseudo">&lt;/p&gt;</span></p>
    </section>`,
  `<section id="section1" class="section1" data-content1='<section id="section1" class="section1">' data-content2="</section>">
      <h2 class="title" data-content1='<h2 class="title">' data-content2="</h2>">About Yoda</h2>
      <p class="intro p1" data-content1='<p class="intro p1">' data-content2="</p>">Paragraph&nbsp;1</p>
      <div data-content1='<div>' data-content2="</div>">
        <p class="intro p2" data-content1='<p class="intro p2">' data-content2="</p>">Paragraph&nbsp;2</p>
      </div>
    </section><div></div>`
]
const questions = [
   {
    'proposals': ['section p', '.p1'],
    'answers': ['red', 'green'],
    'selector': '.p1',
    'answer': 'green',
    'template': 0,
    'why': 'Both <em>section p</em> and <em>.p1</em> target the highlighted element. The specificity of <em>section p</em> is 0.0.0.0.2 and <strong><em>.p1</em> is 0.0.0.1.0</strong>'
  },
  {
    'proposals': ['.section1 p', '.p1'],
    'answers': ['red', 'green'],
    'selector': '.p1',
    'answer': 'red',
    'template': 0,
    'why': 'Both <em>.section1 p</em> and <em>.p1</em> target the highlighted element. The specificity of <strong><em>.section1 p</em> is 0.0.0.1.1</strong> and <em>.p1</em> is 0.0.0.1.0'
  },
  {
    'proposals': ['.p1', 'section p'],
    'answers': ['red', 'green'],
    'selector': '.p1',
    'answer': 'red',
    'template': 0,
    'why': 'Both <em>.p1</em> and <em>section p</em> target the highlighted element. The specificity of <strong><em>.p1</em> is 0.0.0.1.0</strong> and <em>section p</em> is 0.0.0.0.2'
  },
  {
    'proposals': ['#section1', 'p'],
    'answers': ['red', 'green'],
    'selector': 'p',
    'answer': 'green',
    'template': 0,
    'why': 'The <em>#section1</em> selector targets the highlighted element(s) parent. <em>p</em> would inherit its parent\'s color only if there is no color applied directly to paragraphs.'
  },
  {
    'proposals': ['#section1 *', 'p.intro.p1'],
    'answers': ['red', 'green'],
    'selector': '.p1',
    'answer': 'red',
    'template': 0,
    'why': 'Both <em>#section1 *</em> and <em>p.intro.p1</em> target the highlighted element. The universal selector (*) has no specificity value. The specificity of <strong><em>#section1 *</em> is 0.0.1.0.0</strong> and <em>p.intro.p1</em> is 0.0.0.2.1'
  },
  {
    'proposals': ['section *', 'p'],
    'answers': ['red', 'green'],
    'selector': 'p',
    'answer': 'green',
    'template': 0,
    'why': 'Both <em>section *</em> and <em>p</em> target the highlighted element. The specificity of <em>section *</em> is 0.0.0.0.1. The specificity of <strong><em>p</em> is also 0.0.0.0.1 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': ['section .p1', 'section :nth-child(2)'],
    'answers': ['red', 'green'],
    'selector': '.p1',
    'answer': 'green',
    'template': 0,
    'why': 'Both <em>section .p1</em> and <em>section :nth-child(2)</em> target the highlighted element. The specificity of <em>section .p1</em> is 0.0.0.1.1. The specificity of <strong><em>section :nth-child(2)</em> is also 0.0.0.1.1 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': ['section > p', 'section p'],
    'answers': ['red', 'green'],
    'selector': 'section > p',
    'answer': 'green',
    'template': 5,
    'why': 'Both <em>section > p</em> and <em>section p</em> target the highlighted element. The specificity of <em>section > p</em> is 0.0.0.0.2. The specificity of <strong><em>section p</em> is also 0.0.0.0.2 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': [':only-child', 'p'],
    'answers': ['red', 'green'],
    'selector': 'div > p',
    'answer': 'red',
    'template': 5,
    'why': 'Both <em>:only-child</em> and <em>p</em> target the highlighted element. The specificity of <strong><em>:only-child</em> is 0.0.0.1.0</strong> and <em>p</em> is 0.0.0.0.1'
  },
  {
    'proposals': ['.red', '.green'],
    'answers': ['red', 'green'],
    'selector': 'p',
    'answer': 'green',
    'template': 1,
    'why': 'Both <em>.red</em> and <em>.green</em> target the highlighted element. The specificity of <em>.red</em> is 0.0.0.1.0. The specificity of <strong><em>.green</em> is also 0.0.0.1.0 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': ['.green', '.red'],
    'answers': ['green', 'red'],
    'selector': 'p',
    'answer': 'red',
    'template': 1,
    'why': 'Both <em>.red</em> and <em>.green</em> target the highlighted element. The specificity of <em>.green</em> is 0.0.0.1.0. The specificity of <strong><em>.red</em> is also 0.0.0.1.0 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': ['section :not(.title)', '.red'],
    'answers': ['green', 'red'],
    'selector': 'p',
    'answer': 'green',
    'template': 3,
    'why': 'Both <em>section :not(.title)</em> and <em>.red</em> target the highlighted element. The specificity of <strong><em>section :not(.title)</em> is 0.0.0.1.1</strong> and <em>.red</em> is 0.0.0.1.0'
  },
  {
    'proposals': ['section :not(.title)', 'p.red'],
    'answers': ['green', 'red'],
    'selector': 'p',
    'answer': 'red',
    'template': 3,
    'why': 'Both <em>section :not(.title)</em> and <em>p.red</em> target the highlighted element. The specificity of <em>section :not(.title)</em> is 0.0.0.1.1 .The specificity of <strong><em>p.red</em> is also 0.0.0.1.1 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': ['p', '#section1 p'],
    'answers': ['green', 'red'],
    'selector': 'p',
    'answer': 'green',
    'template': 4,
    'why': 'Both <em>p</em> and <em>#section1 p</em> target the highlighted element. The specificity of <em>#section1 p</em> is 0.0.1.0.1 but the highlighted element has also an <strong>inline style that wins (0.1.0.0.0)</strong>'
  },
  {
    'proposals': ['p', '#section1 p'],
    'answers': ['red', 'green'],
    'colorvalues': ['red!important', 'green'],
    'selector': 'p',
    'answer': 'red',
    'template': 4,
    'why': 'The highlighted element has an inline style (0.1.0.0.0) but the <strong><em>p</em> selector uses !important which wins even with the inline styles (1.0.0.0.1)</strong>'
  },
  {
    'proposals': ['form input[type="text"]', 'form .info'],
    'answers': ['red', 'green'],
    'selector': 'input',
    'answer': 'red',
    'template': 2,
    'why': 'Both <em>form input[type="text"]</em> and <em>form .info</em> target the highlighted element. The specificity of <strong><em>form input[type="text"]</em> is 0.0.0.1.2</strong> and <em>form .info</em> is 0.0.0.1.1.'
  },
  {
    'proposals': ['input[type="text"]', 'input.info'],
    'answers': ['red', 'green'],
    'selector': 'input',
    'answer': 'green',
    'template': 2,
    'why': 'Both <em>input[type="text"]</em> and <em>input.info</em> target the highlighted element. The specificity of <em>input[type="text"]</em> is 0.0.0.1.1. The specificity of <strong><em>input.info</em> is also 0.0.0.1.1 but it comes later in the stylesheet.</strong>'
  }
]

Vue.component( 'css', {
  props: ['q', 'answers'],
  computed: {
    displayCSS() {
      return this.q.reduce( (acc, curr, index) => `${acc}${curr} {<br>&nbsp;&nbsp;color: <span class="helper" style="background:${this.answers[index]}"></span>${this.answers[index]};<br>}<br>`, '' );
    }
  },
  template: `<pre v-html="displayCSS" class="code"></pre>`
})

Vue.component( 'question', {
  props: ['v', 'q', 'answers', 'disabled', 'correct'],
  data() {
    return {
      answer: '',
      a: []
    }
  },
  computed: {
    checked: {
      get() {
        return this.v
      },
      set(val) {
        this.a = val
      }
    }
  },
  template: `<div>
<div :class="['label-ctnr', disabled ? 'disabled': '']"><label :class="[ feedbackClass(item), checkedClass(item)]" v-for="(item, i) in answers">
<span v-if="disabled && isChecked(item)">
<svg v-if="isCorrectChecked(item)" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">  
  <polyline class="path check" fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
</svg>
<svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">  
  <line class="path line" fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line class="path line" fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
</svg>
</span>
<input @change="answerChecked" type="radio" :id="item" :value="item" v-model="checked" :disabled="disabled"/><span v-html="itemWithColor(item)"></span></label></div>

<button v-if="answer" type="button" @click="submitAnswer">Answer</button>
</div>`,
  methods: {
    answerChecked() {
      this.$emit('answered', this.a )
    },
    checkedClass(item) {
        return this.isChecked(item) ? 'checked' : 'not-checked'
    },
    isChecked(item) {
      return item === this.checked 
    },
    isCorrectChecked(item) {
      return item === this.checked && item === this.correct
    },
    feedbackClass(item) {
        if (!this.disabled) {
          return
        }
      return item === this.correct ? 'correct' : 'wrong'
    },
    itemWithColor(item) {
      return `<span class="helper" style="background:${item}"></span>${item}`
    }
  }
}
)

Vue.component('v-style', {
  render: function (createElement) {
    return createElement('style', this.$slots.default)
  }
});

Vue.component('pagedoc', {
  props: ['markup'],
  template: "#markup",
  data() {
		return {}
	}
});

Vue.component( 'finalresults', {
  props: [ 'finalpercentage'],
  template: "#finalresults"
});

new Vue({
  el: '#app',
  data() {
    return {
      currentIndex: 0,
      checkedAnswers: [],
      v: [],
      score: 0,
      questions: [],
      isIdle: true,
      askedForResults: false
    }
  },
  computed: {
    total() {
      return this.questions.length 
    },
    finalPercentage() {
      return `${Math.round(this.score/this.total*100)}%`
    },
    proposals() {
      return this.questions[this.currentIndex].proposals
    },
    selector() {
      return this.questions[this.currentIndex].selector
    },
    answer() { 
       return this.questions[this.currentIndex].answer
    },
    colorvalues() {
      const q = this.questions[this.currentIndex]
      if (typeof q.colorvalues !== 'undefined') {
        return q.colorvalues
      }
       return q.answers
    },
    why() {
      return this.questions[this.currentIndex].why || ''
    },
    answers() { 
       return this.questions[this.currentIndex].answers
    },
    isAnswered() {
      return this.v.length !== 0
    },
    disabled() {
      return this.v.length !== 0
    },
    isFinished() {
      return this.currentIndex === this.total - 1
    },
    shouldShowNext() {
      return this.isAnswered && !this.isFinished
    },
    allDone() {
      return this.isAnswered && this.isFinished
    },
    displayPageDocCSS() {
      return this.proposals.reduce( (acc, curr, index) => ` ${acc} .page-doc ${curr} {color: ${this.colorvalues[index]}}`, '' );
    },
    templ() {
      return this.questions.length !== 0 ?markups[this.questions
[this.currentIndex].template] : ''
    }
  },
  methods: {
    start() {
      this.questions = questions
      //this.shuffle()
      this.isIdle = false
    },
    shuffle() {
      this.questions = questions.sort(function(a, b){return 0.5 - Math.random()}) 
    },
    go(r) {
      this.v = r
      this.addToScore()
      this.disabled = true
      this.isAnswered = true
    },
    addToScore() {
      if (this.checkAnswer()) {
        this.score++
      }
    },
    checkAnswer() {
      return this.v === this.questions[this.currentIndex].answer
    },
    resetStep() {
      this.isAnswered = false
      this.disabled = false
      this.v = []
    },
    displayNext() {
      this.currentIndex++
      this.resetStep()
    },
    playAgain() {
      this.score = 0
      this.start()
      this.currentIndex = 0
      this.askedForResults = false
      this.resetStep()
    },
    showResults() {
      this.askedForResults = true
    }
  }
})


              
            
!
999px

Console