title: Match A to B, correct match disappear, and timer and error count
body: <p>Would appreciate some guidance with this matching activity. I illustrate with the basic <code>html</code> and <code>css</code> code below - this is the format that I want, meaning, I want the contents (<strong>words/numbers</strong>) of the boxes to be changeable in the <code>HTML</code> section, I just need help with the <code>javascript</code>.</p>
  
  <p>Aim: to match A to B, so for example, when user clicks on <code>"aaaaaaaa"</code> and <code>"11111111"</code> then the match is correct and both boxes disappears. However if for example the user clicks on <code>"aaaaaaaa"</code> and <code>"33333333"</code> then it is recorded and counted as an error which is then displayed on the page.</p>
  
  <p>Also, how to add a timer from the moment the page is loaded till all the matches are made and the activity is finished ?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  
  #wordBx
  {
  width:168px;
  height:168px;
  border:1px grey solid;
  text-align:center;
  padding:1px;
  float:left;
  }
  
  .word
  {
  width:165px;
  height:40px;
  border:1px grey solid;
  }
  
  #numBox
  {
  width:50%;
  height:400px;
  border:1px blue solid;
  text-align:center;
  margin:1px;
  float:left;
  overflow:hidden;
   }
  
  .numb
  {
  width:180px;
  height:70px;
  border:1px blue solid;
  margin:2px;
  float:left;
  font-size:11pt;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="wordBx"&gt;
  &lt;div class="word"&gt;aaaaaaaa&lt;/div &gt;
  &lt;div class"word"&gt;bbbbbbbb&lt;/div &gt;
  &lt;div class="word"&gt;cccccccc&lt;/div &gt;
  &lt;div class="word"&gt;dddddddd&lt;/div &gt;
  &lt;/div&gt;
  
  &lt;div id="numBox"&gt;
  &lt;div class="numb"&gt;11111111&lt;/div &gt;
  &lt;div class="numb"&gt;22222222&lt;/div &gt;
  &lt;div class="numb"&gt;33333333&lt;/div &gt;
  &lt;div class="numb"&gt;44444444&lt;/div &gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>