title: JavaScript for element repetition (for-loop) and record responses
body: <p>I am very new to HTML and js, facing problems that I have struggled with for days. None of my attempts works. It is so hard for a novice to comprehend information found on the internet.</p>
  <p>The goal is to replace the repeated div, i.e. <code>&lt;div class=&quot;page&quot; id=&quot;page1&quot;&gt;, &lt;div class=&quot;page&quot; id=&quot;page2&quot;&gt;, &lt;div class=&quot;page&quot; id=&quot;page3&quot;&gt; </code> and its iterable components (img scource 1~3, etc) with one &quot;for loop&quot; by JavaScript.</p>
  <p>Plus, the response on each page need to be recorded in order to compute accuracy and show it on the last page.
  Please help me :( Thank you so much....</p>
  <p>Here are the codes (see how it works on codepen:
  <a href="https://codepen.io/azaleawang/pen/mdMajNK?editors=1000" rel="nofollow noreferrer">https://codepen.io/azaleawang/pen/mdMajNK?editors=1000</a> ):</p>
  <pre><code>
  &lt;script&gt;
  var order = new Array(1,2,3,4);
  var current = 0; //current trial
  
  $(document).ready(function(){
   ShowTrial(current);
  });
  
  function ShowTrial(t) {
   $(&quot;#page&quot; + order[t]).show();
   var N = t+1; //counting from 1
   $(&quot;.progress&quot;).text('('+N+'/'+order.length+')');
  }
  
  function NextTrial() {
   $(&quot;#page&quot; + order[current]).hide();
   current++;
   ShowTrial(current);
  }
  &lt;/script&gt;
  
  &lt;style&gt; .page {display: none;} &lt;/style&gt; 
  
  Please indicate the sex of this face:
  </code></pre>
  <p>Here is the repeated div need to be replaced and record user's response (cannot figure out the way to do it QQ):</p>
  <pre><code>&lt;div class=&quot;page&quot; id=&quot;page1&quot;&gt;
  &lt;img src=1.jpg&gt;&lt;br&gt;
  &lt;input type=radio name=f1 value=M&gt; M
  &lt;input type=radio name=f1 value=F&gt; F &lt;br&gt;
  &lt;a href=&quot;javascript:NextTrial()&quot;&gt;Next&lt;/a&gt; 
  &lt;span class=&quot;progress&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;page&quot; id=&quot;page2&quot;&gt;
  &lt;img src=2.jpg&gt;&lt;br&gt;
  &lt;input type=radio name=f2 value=M&gt; M
  &lt;input type=radio name=f2 value=F&gt; F &lt;br&gt;
  &lt;a href=&quot;javascript:NextTrial()&quot;&gt;Next&lt;/a&gt; 
  &lt;span class=&quot;progress&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;page&quot; id=&quot;page3&quot;&gt;
  &lt;img src=3.jpg&gt;&lt;br&gt;
  &lt;input type=radio name=f3 value=M&gt; M
  &lt;input type=radio name=f3 value=F&gt; F &lt;br&gt;
  &lt;a href=&quot;javascript:NextTrial()&quot;&gt;Next&lt;/a&gt; 
  &lt;span class=&quot;progress&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;page&quot; id=&quot;page4&quot;&gt;
  &lt;h3&gt;All done! Thanks!&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is what I've tried but failed....</p>
  <pre><code>&lt;div class=&quot;page&quot; id=&quot;page1&quot;&gt;
  &lt;/div&gt;
  &lt;script&gt;
  document.write('Please indicate the sex of this face:');
  count = ['1','2','3'];
  var pageNo= document.getElementById('page1');
  container = document.getElementById('page1');
   for(i = 1; i &lt; count.length+1; i++){
     container.innerHTML+='&lt;img src='+i+'.jpg&gt;&lt;br&gt;';
     container.innerHTML+='&lt;input type=radio name=f1 value=M&gt; M'
     container.innerHTML+='&lt;input type=radio name=f1 value=F&gt; F &lt;br&gt;'
     container.innerHTML+='&lt;a href=&quot;javascript:NextTrial()&quot;&gt;Next&lt;/a&gt; ';
     container.innerHTML+='&lt;span class=&quot;progress&quot;&gt;&lt;/span&gt;';
     pageNo.id='page'+i;
   }
  
  &lt;/script&gt;
  
  &lt;div class=&quot;page&quot; id=&quot;page4&quot;&gt;
     &lt;h3&gt;All done! Thanks!&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>