<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://mijn.100procent.email/assets/css/app.css">   

<div style="padding: 10px 30px">
    <div class="row">
        <div class="col-sm-12 col-lg-10">
            
            <h2>Bereken de benodigde steekproefgrootte</h2>								
            
            <p>Als je wilt gaan testen, moet je weten hoe groot de steekproef moet zijn om een betrouwbare conclusie te trekken.								
            Als de steekproef te klein is, is de kans dat je een ander resultaat krijgt als je de test opnieuw doet (te) groot is. De uitkomst berust								
            dan op toeval en is niet betrouwbaar. Hieronder kan je de benodigde grootte van je steekproef bepalen. Als je test op openpercentage								
            vul alleen je verwachte openrate in, als je wilt testen op CTR vul je allebei de velden in.<br><br></p>
            
            <form class="form-horizontal">								
                				
                <div class="form-group">
                	<label for="opens" class="control-label col-xs-6 col-md-5 col-lg-3">Welk open percentage verwacht je?</label>	
                	<div class="col-xs-6 col-md-3 col-lg-2">
                		<div class="input-group">
                			<input id="opens" name="opens" type="number" class="form-control text-right" value="80" placeholder="0" min="1" max="100"><div class="input-group-addon">%</div>
                		</div>		
                	</div>
                </div>
                
                <div class="form-group">
                	<label for="clicks" class="control-label col-xs-6 col-md-5 col-lg-3">Welk click percentage verwacht je?</label>	
                	<div class="col-xs-6 col-md-3 col-lg-2">
                		<div class="input-group">
                			<input id="clicks" name="clicks" type="number" class="form-control text-right" value="1" placeholder="0" min="1" max="100"><div class="input-group-addon">%</div>
                		</div>		
                	</div>
                </div>
                
                <div class="form-group">
                	<label for="afwijking" class="control-label col-sm-3">Welke afwijking sta je toe?</label>
                	<div class="col-sm-9">	
                		<label class="radio-inline"><input name="afwijking" type="radio" value="5" checked>5%</label>
                		<label class="radio-inline"><input name="afwijking" type="radio" value="10">10%</label>
                		<label class="radio-inline"><input name="afwijking" type="radio" value="15">15%</label>
                		<label class="radio-inline"><input name="afwijking" type="radio" value="20">20%</label>
                		<label class="radio-inline"><input name="afwijking" type="radio" value="25">25%</label>
                		<a tabindex="0" class="btn btn-sm btn-default" style="margin: 6px 0 0 20px; padding: 3px 8px" role="button" data-toggle="popover" data-trigger="focus" title="Welke bandbreedte sta je toe als afwijking op het resultaat? " data-content="Vaak wordt 5%, 10% of 15% gehanteerd.<br>Stel: de toegestane afwijking is 10% en je verwacht 25% openpercentage, dan is de afwijking 2,5. Bij een tweezijdige test (daarvan gaan we hier uit) is het openpercentage tussen de 22,5% en 27,5%.">?</a>
                	</div>
                </div>
                
                <br>
                			
                <h2>Benodigde steekproefgrootte</h2>		
                
                <div class="row">
                <div class="col-lg-7">
                		
                <div class="row">
                	<div class="col-xs-12 result-label">Bij een betrouwbaarheid van:</div>
                	<div class="col-xs-3 result-label text-right"></div>
                	<div class="col-xs-3 result-label text-right">90%</div>
                	<div class="col-xs-3 result-label text-right">95%</div>
                	<div class="col-xs-3 result-label text-right">99%</div>
                </div>		
                
                <div class="row">
                	<div class="col-xs-12 result-label">Is de benodigde steekproef bij testen op:</div>
                	<div class="col-xs-3 result-label">Open%</div>
                	<div class="col-xs-3 text-right"><div class="col-xs-12 result open1"></div></div>
                	<div class="col-xs-3 text-right"><div class="col-xs-12 result open2"></div></div>
                	<div class="col-xs-3 text-right"><div class="col-xs-12 result open3"></div></div>
                </div>		
                
                <div class="row">
                	<div class="col-xs-3 result-label">CTO</div>
                	<div class="col-xs-3 text-right"><div class="col-xs-12 result ctr1"></div></div>
                	<div class="col-xs-3 text-right"><div class="col-xs-12 result ctr2"></div></div>
                	<div class="col-xs-3 text-right"><div class="col-xs-12 result ctr3"></div></div>
                </div>
                
                </div>
                </div>		
                
                <br>
                
                <div class="row">
                	<div class="col-md-12">
                		<p>Bij een betrouwbaarheid van 90% zal bij herhaling van de test het resultaat in 90% van de testen binnen de toegestane afwijking uitkomen.</p>
                	</div>		
                </div>
            	
            </form>
            
        </div>
    </div>
</div>

 
  
	
	            	

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script src="/assets/js/app.js"></script>	
		<script>
	$(function(){
		var ooh = function(a,b,c) {
			return (b>0&&(c.length-b)%3 == 0 ? "." : "") + a;
		};
		var calc = function() {
			var C =	[1.65, 1.96, 2.58];
			var opens = parseFloat($("[name='opens']").val());
			var clicks = parseFloat($("[name='clicks']").val());
			var afwijking = parseFloat($("[name='afwijking']:checked").val()) / 100;
			var opens_afwijking = opens * afwijking;			
			var clicks_afwijking = clicks * afwijking;
			if (afwijking && opens && clicks) {
    			for (i = 0; i < C.length; i++) {				
    				$(".open" + (i+1)).text(((C[i]*C[i])/(opens_afwijking*opens_afwijking)*opens*(100-opens)).toFixed(0).replace(/./g, ooh));
    				$(".ctr" + (i+1)).text(((C[i]*C[i])/(clicks_afwijking*clicks_afwijking)*clicks*(100-clicks)).toFixed(0).replace(/./g, ooh));
    			}	
			} else {
    			for (i = 0; i < C.length; i++) {				
    				$(".open" + (i+1)).text("- - -");
    				$(".ctr" + (i+1)).text("- - -");
    			}	
			}
		};
		$(document).on("change click", "input", calc);
		calc();
		$(function () {
			$('[data-toggle="popover"]').popover({html:1})
		})		
	});
</script>
	 <style>
    .frame {
    	font-size: 110%;
    }
    .frame p, .frame h2 {
    	line-height: 200%
    }
    .frame .result {
    	background-color: #a3cbca;
    	color: black;
    	margin-bottom: 10px;   	    
    }
    .frame .result, .frame input {
    	font-size: 140%;
    }
    .frame .result-label {
	   line-height: 30px;
    }    
    .frame .form-horizontal .control-label {
    	text-align: left;
    }
</style>