<!doctype html>
<html>
    <head><title>Quiz Page</title>
    
    <script src="https://unpkg.com/vue"></script>
    <style>
        .highlighted {
        color: red;
	text-decoration-line: underline;
        }
	.dismissed {
	opacity: 0.5;
	}
        ul li {
            list-style: none;
        }
    </style>
    </head>

    <body>
      
      <div id="quizpanel">
	<p><label for="cprop">Color: <input v-model="state" id="cprop" /></p>
    
    <ul>
        <li v-for="item in items" />  {{ item.name }}
	<span v-if="item.selected"> --> Chosen</span>
        </li>
    </ul>
        
    <p>Total number of elements: {{ items.length }}</p>
    
        <div>Display class: 
<!--            <input type="text" v-model="view_state" />-->
<!--
        <select v-model="view_state">
            <option value="">Default</option>    
            <option value="highlighted">Highlighted</option>
            <option value="dismissed">Grayed Out</option>
            
        </select>
     
-->
         <br>
        <input type="radio" name="display" value="" v-model="view_state" />Default<br> 
           <input type="radio"  name="display" value="highlighted"  v-model="view_state" />Highlighted<br> 
            <input type="radio"  name="display" value="dismissed"  v-model="view_state" />Grayed Out
        </div>
        
    <h3 v-bind:class="view_state">Selected Items</h3>
    <ul>
        <li v-for="item in sel_items"> {{ item.name }}</li>
    </ul>
        
                
    <p>Total number of selected elements: {{ sel_items.length }}</p>
        
        <p>Grand total: {{ items.length + sel_items.length }}</p>

</div>
</body>
<script src="q1.js"></script>
</html>
