form is not working for school project I must also get the answers into an array. Any help would be appreciated

the html seems to be fine from what I can see it's the javascript that is not working. I also need to get the answers into an array but that is a later problem that I can deal with.

<form>
        <fieldset>
            <legend>Content:</legend>
                <label><input type ="radio" name ="content" value="bad"/>bad</label>
                <label><input type ="radio" name ="content" value="average"/> average</label>
                <label><input type ="radio" name ="content" value="good"/> good</label>
                <label><input type ="radio" name ="content" value="excellent"/> excellent</label>
        </fieldset>
        <br>
        <fieldset>
                <legend>Style:</legend><h5>the site needs more:</h5>
                <label2><input type ="checkbox" name="style"value="color"/>color</label2>
                <label2><input type ="checkbox" name="style" value="whitespace"/> 
       whitespace</label2>
                <label2><input type ="checkbox" name="style"value="Texture"/> Texture</label2>
                <label2><input type ="checkbox" name="style" value="Icons"/> Icons</label2>
        </fieldset>
        <br>
        <fieldset>
                <legend>Usability:</legend>  
                <label><input type ="radio" name="usability" value="bad"/>bad</label>
                <label><input type ="radio" name="usability" value="average"/> average</label>
                <label><input type ="radio" name="usability" value="good"/> good</label>
                <label><input type ="radio" name="usability" value="excellent"/> excellent</label>
        </fieldset>
        <br>
        <fieldset>
                <legend>Theme:</legend>
                <label><input type ="radio" name ="Theme" value="bad"/>bad</label>
                <label><input type ="radio" name ="Theme" value="average"/> average</label>
                <label><input type ="radio" name ="Theme" value="good"/> good</label>
                <label><input type ="radio" name ="Theme" value="excellent"/> excellent</label>
        </fieldset>
        <br>   
        <fieldset>
                <legend>Optimization</legend>
                <label><input type ="radio" name ="Optimization" value="bad"/>bad</label>
                <label><input type ="radio" name ="Optimization" value="average"/> average</label>
                <label><input type ="radio" name ="Optimization" value="good"/> good</label>
          <label><input type ="radio" name ="Optimization" value="excellent"/> excellent</label>
        </fieldset>        
        <input type="button" value ="Submit">
    </form>

the event listener is not working i assume its because of the check function has to have something wrong.I am still learning the basics.

    var contentflag = false, styleflag = false, usabilityflag = false, themeflag = optimizationflag 
 = false;
          var btnSubmit = document.querySelector("input[type='button']");
          btnSubmit.addEventListener("click", check);
          function check(){
            var messages = [];
            messages.push(checkcontent());  
            messages.push(checkstyle());
            messages.push(checkusability());
			messages.push(checktheme());
			messages.push(checkoptimization());
            if (contentflag && styleflag && usabilityflag && themeflag && optimizationflag){
              var content = document.querySelector("input[name='content']:checked").value;
              var styleFields = 
Array.prototype.slice.call(document.querySelectorAll("input[name='style']:checked"));
              var style = styleFields.map(function(item){
                return item.value;
              });
              style = style.join(", ");
              var usability = document.querySelector("input[name='usability']:checked").value;
              var theme = document.querySelector("input[name='theme']:checked").value;
			  var optimization = document.querySelector("input[name='optimization']:checked").value;
              alert("thank you for your input");
            } else {
             var message = messages.join(", ");
              alert("You haven't selected: " + message);
            }
          } 
          function checkcontent(){	
           if(document.querySelector("input[name='content']:checked")){
              contentflag = true;
            } else { 
              contentflag = false; 
              return "content";
            }
          }
          function checkstyle(){	
            if(document.querySelector("input[name='style']:checked")){
             styleflag = true;
            } else { 
              styleflag = false;
              return "style";	
            }			
          }
          function checkusability(){	
            if (document.querySelector("input[name='usability']:checked")){
				usabilityflag = true;
            } else {
				usabilityflag = false;
              return "usability";	
            }
          }
          function checktheme(){	
            if (document.querySelector("input[name='theme']:checked")){
				themeflag = true;
            } else { 
				themeflag = false;
              return "theme";
            }
			function checkoptimization(){	
				if (document.querySelector("input[name='optimizationt']:checked")){
					optimizationflag = true;
				} else { 
					optimizationflag = false;
				  return "optimization";
				}
			}
		}