added description for category

public/index.html

@@ -80,6 +80,23 @@
 
           </select>
           <div id="category-validation" class="error-message">Please select the category.</div>
+          <div class="more-information">
+            <div>
+              <h4> <span>&#9432;</span> More Information</h4>
+            </div>
+            <div>
+              <div>1) Mixed-ability group: It represents a standard classroom that includes learners whose average
+                scores in English range from 0 to 20.</div>
+              <div>2) High-ability group: This category represents learners of a very good level of English. This can be
+                determined by the English school average scale 16-20.</div>
+              <div>3) Good-ability group: This category represents learners of good level of English. This can be
+                determined by the English school average scale 13-15.99.</div>
+              <div>4) Average-ability group: This category includes learners of average level of English. This can be
+                determined by the English average scale 10-13.99.</div>
+              <div>5) Low-ability group: This category includes learners of low level of English. This can be determined
+                by the English school average that is lower than 10.</div>
+            </div>
+          </div>
         </div>
         <div>
           <div>

public/style.css

@@ -132,3 +132,8 @@ button:hover {
   display: none;
 }
 
+.more-information {
+  font-size: 12px;
+  font-style: italic;
+}
+