1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<title>Understand your family â The Misfit Memo</title> 7<style> 8*{box-sizing:border-box;margin:0;padding:0} 9html,body{width:100%;min-height:100%} 10body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#E8F4FB;color:#1B3A5C;padding:20px} 11.quiz-header{text-align:center;padding:20px 0 28px} 12.quiz-header h1{font-size:26px;font-weight:700;margin-bottom:8px;color:#1B3A5C} 13.quiz-header .quiz-subtitle{font-size:16px;font-weight:600;color:#E87722;max-width:440px;margin:0 auto 12px;line-height:1.4} 14.quiz-header p{font-size:14px;color:#4a6a8a;max-width:440px;margin:0 auto;line-height:1.6} 15h2{font-size:18px;font-weight:700;margin-bottom:12px;color:#1B3A5C} 16p{font-size:14px;line-height:1.5;margin-bottom:12px} 17.tab-row{display:flex;flex-direction:column;gap:8px;max-width:300px;margin:0 auto} 18.tab{padding:10px 18px;border:2px solid #E87722;border-radius:6px;background:#fff;color:#E87722;font-size:14px;font-weight:600;cursor:pointer;text-align:center;width:100%} 19.tab.active{background:#E87722;color:#fff} 20.mode-intro{font-size:13px;color:#6a8aaa;text-align:center;margin-top:12px} 21.quiz-body{margin-top:28px} 22.progress-bar{height:6px;background:#c8dce8;border-radius:3px;margin-bottom:6px} 23.progress-fill{height:6px;background:#E87722;border-radius:3px;transition:width 0.3s} 24.progress-text{font-size:12px;color:#6a8aaa} 25.q-block{background:#fff;border-radius:8px;padding:14px;margin-bottom:12px;border:1px solid #c8dce8} 26.q-text{font-size:14px;font-weight:500;margin-bottom:10px;color:#1B3A5C} 27.scale-row{display:flex;align-items:center;gap:4px} 28.scale-label{font-size:10px;color:#8aaac0;white-space:nowrap;flex-shrink:0;max-width:55px} 29.scale-label.right{text-align:right} 30.scale-btns{display:flex;gap:4px;flex:1;justify-content:center} 31.scale-btn{width:32px;height:32px;border-radius:50%;border:2px solid #b8ccd8;background:#fff;color:#4a6a8a;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;flex-shrink:0} 32.scale-btn.selected{background:#E87722;border-color:#E87722;color:#fff} 33.nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-bottom:20px} 34.nav-btn{padding:9px 20px;border:2px solid #b8ccd8;border-radius:6px;background:#fff;color:#4a6a8a;font-size:13px;font-weight:600;cursor:pointer} 35.nav-btn.primary{background:#E87722;border-color:#E87722;color:#fff} 36.email-gate{max-width:360px;margin:20px auto;text-align:center} 37.email-gate h2{margin-bottom:8px;color:#1B3A5C} 38.email-gate>p{margin-bottom:16px;color:#4a6a8a} 39.field{width:100%;padding:10px 14px;font-size:14px;border:1px solid #b8ccd8;border-radius:6px;margin-bottom:12px;display:block;background:#fff;color:#1B3A5C} 40.field::placeholder{color:#8aaac0} 41.error-msg{color:#c0392b;font-size:12px;display:none;margin-bottom:8px} 42.reveal-btn{width:100%;padding:12px;background:#E87722;border:none;border-radius:6px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;margin-bottom:8px} 43.reveal-btn:hover{background:#d06518} 44.results{max-width:560px;margin:0 auto;padding-bottom:40px} 45.results-sub{font-size:12px;color:#6a8aaa;margin-bottom:20px} 46.trait-row{background:#fff;border-radius:8px;padding:14px;margin-bottom:10px;border:1px solid #c8dce8} 47.trait-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} 48.trait-name{font-weight:700;font-size:14px;color:#1B3A5C} 49.trait-label{font-size:12px;color:#6a8aaa} 50.trait-bar-bg{height:8px;background:#c8dce8;border-radius:4px;margin-bottom:8px} 51.trait-bar-fill{height:8px;border-radius:4px} 52.trait-desc{font-size:13px;color:#4a6a8a} 53.divider{border:none;border-top:1px solid #c8dce8;margin:20px 0} 54.disclaimer{font-size:11px;color:#8aaac0;line-height:1.5} 55.cta-block{margin-top:1.5rem;text-align:center} 56.cta-link{display:inline-block;padding:10px 24px;background:#E87722;color:#fff;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600} 57.cta-link:hover{background:#d06518} 58</style>
59<script type='text/javascript' src='https://api.netlify.com/Vc2cUZqgTfg3hE_yhX5Sf_is9re7czTer8PkAFzb7ENwhIve65gRoLv3ebBemCSPnYUD0sUs4Lp9bsgic2KP_3pidcbfJz02Y6_HFIsE6B7A1E8iviw5ShCR3-8qCjuRoOOfK7tjSGPs0LUbsfH-cy8ICmgf3LdDak-iG8UNF8EDgtvz-Z_vejpraXz7m586HConuS6J3M4LATAhC6tnpeNAFXNqbqxCa4M1MLviq8ug2gRednKUBWANwiOK4ZjR6m6GCDt-29unlC-3jAefCunM1s6wxHjxc3RIGWnHZ3DUwzomXuMWCyQITo5GCekRsgBrB0b03_PANqfN0pg1y-oxA9_9E-uVapWjYEGhg2VxR-k9UUZnLc7Uxdqq_EhLOxTitLdszpkYLe1NbNFV-YMZwk36FoPBvZSLn10LZxERh0z4rKfPhWNepWc2OaRNQJFSp5wWqUQNFV5xjBmTvKxu3aKv_DmLHYFFj5360CJuCfXKuPCF84DLwkTEOwyK0TST1HvW6h12dIDPswFu'></script>
vendor: 1 bytes, line 59
59
60<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
vendor: 1 bytes, line 60
60
61<script>emailjs.init({publicKey:'AxaKQLIs3o6rwyBQG'});</script>
61 62</head> 63<body> 64 65<div class="quiz-header"> 66 <h1>Understand your family!</h1> 67 <p class="quiz-subtitle">Explore your differences and similarities</p> 68 <p>Most family conflicts come down to personality differences. Find out why you clash and get free personalised results by email.</p> 69</div> 70 71<div id="app"></div> 72
73<script> 74var MODES=[ 75 {id:'child',label:'About my child',intro:'Answer as you observe your child most of the time.'}, 76 {id:'self',label:'About me',intro:'Answer as you honestly see yourself right now.'}, 77 {id:'partner',label:'About my partner',intro:'Answer as you observe your partner most of the time.'} 78]; 79 80var BIG5=[ 81 {text:'Is the life of the party',trait:'E',dir:1},{text:'Feels little concern for others',trait:'A',dir:-1}, 82 {text:'Is always prepared',trait:'C',dir:1},{text:'Gets stressed out easily',trait:'N',dir:-1}, 83 {text:'Has a rich vocabulary',trait:'O',dir:1},{text:'Does not talk a lot',trait:'E',dir:-1}, 84 {text:'Is interested in people',trait:'A',dir:1},{text:'Leaves belongings around',trait:'C',dir:-1}, 85 {text:'Is relaxed most of the time',trait:'N',dir:1},{text:'Has difficulty understanding abstract ideas',trait:'O',dir:-1}, 86 {text:'Feels comfortable around people',trait:'E',dir:1},{text:'Insults people',trait:'A',dir:-1}, 87 {text:'Pays attention to details',trait:'C',dir:1},{text:'Worries a lot',trait:'N',dir:-1}, 88 {text:'Has a vivid imagination',trait:'O',dir:1},{text:'Keeps in the background',trait:'E',dir:-1}, 89 {text:'Sympathises with others feelings',trait:'A',dir:1},{text:'Makes a mess of things',trait:'C',dir:-1}, 90 {text:'Seldom feels blue',trait:'N',dir:1},{text:'Is not interested in abstract ideas',trait:'O',dir:-1}, 91 {text:'Starts conversations',trait:'E',dir:1},{text:'Is not really interested in others',trait:'A',dir:-1}, 92 {text:'Gets chores done right away',trait:'C',dir:1},{text:'Is easily disturbed',trait:'N',dir:-1}, 93 {text:'Has excellent ideas',trait:'O',dir:1},{text:'Has little to say',trait:'E',dir:-1}, 94 {text:'Has a soft heart',trait:'A',dir:1},{text:'Often forgets to put things back in place',trait:'C',dir:-1}, 95 {text:'Gets upset easily',trait:'N',dir:-1},{text:'Does not have a good imagination',trait:'O',dir:-1}, 96 {text:'Talks to lots of different people at parties',trait:'E',dir:1},{text:'Is not really interested in others',trait:'A',dir:-1}, 97 {text:'Likes order',trait:'C',dir:1},{text:'Changes mood a lot',trait:'N',dir:-1}, 98 {text:'Is quick to understand things',trait:'O',dir:1},{text:'Does not like drawing attention to self',trait:'E',dir:-1}, 99 {text:'Takes time out for others',trait:'A',dir:1},{text:'Shirks duties',trait:'C',dir:-1}, 100 {text:'Has frequent mood swings',trait:'N',dir:-1},{text:'Uses difficult words',trait:'O',dir:1}, 101 {text:'Does not mind being the centre of attention',trait:'E',dir:1},{text:'Feels others emotions',trait:'A',dir:1}, 102 {text:'Follows a schedule',trait:'C',dir:1},{text:'Gets irritated easily',trait:'N',dir:-1}, 103 {text:'Spends time reflecting on things',trait:'O',dir:1},{text:'Is quiet around strangers',trait:'E',dir:-1}, 104 {text:'Makes people feel at ease',trait:'A',dir:1},{text:'Is exacting in their work',trait:'C',dir:1}, 105 {text:'Often feels blue',trait:'N',dir:-1},{text:'Is full of ideas',trait:'O',dir:1} 106]; 107 108var H_ITEMS=[ 109 {text:'Would never take things that are not theirs, even if no one would know',trait:'H',dir:1}, 110 {text:'Would be tempted to use counterfeit money if they knew they would not get caught',trait:'H',dir:-1}, 111 {text:'Thinks they are entitled to more respect than the average person',trait:'H',dir:-1}, 112 {text:'Would not use flattery to get ahead',trait:'H',dir:1}, 113 {text:'Wants a lot of luxury in their life',trait:'H',dir:-1}, 114 {text:'Is comfortable with having very little money',trait:'H',dir:1}, 115 {text:'Believes they deserve better treatment than most people',trait:'H',dir:-1}, 116 {text:'Avoids pretending to be something they are not',trait:'H',dir:1} 117]; 118 119var ALL=BIG5.concat(H_ITEMS); 120var TOTAL=ALL.length; 121var PG=5; 122 123var TMETA={ 124 E:{name:'Extraversion',color:'#185FA5',desc:function(s){return s>=60?'Energised by social contact, expressive and talkative':s>=40?'Comfortable in groups and also alone':'Prefers quieter environments, processes things internally'}}, 125 A:{name:'Agreeableness',color:'#1D9E75',desc:function(s){return s>=60?'Cooperative and warm, values harmony with others':s>=40?'Generally cooperative with an independent streak':'Straightforward and direct, prioritises logic over diplomacy'}}, 126 C:{name:'Conscientiousness',color:'#534AB7',desc:function(s){return s>=60?'Organised, reliable and motivated to follow through':s>=40?'Generally dependable with some flexibility around routine':'Prefers flexibility over structure, may struggle with sustained focus'}}, 127 N:{name:'Emotional stability',color:'#BA7517',desc:function(s){return s>=60?'Calm under pressure, emotionally resilient and steady':s>=40?'Generally even-tempered with some sensitivity to stress':'High emotional sensitivity, may react strongly to stressors'}}, 128 O:{name:'Openness',color:'#993556',desc:function(s){return s>=60?'Creative and curious, drawn to new ideas and experiences':s>=40?'Balances imagination with practicality':'Prefers the familiar and concrete over the abstract'}}, 129 H:{name:'Honesty-Humility',color:'#3B6D11',desc:function(s){return s>=60?'Avoids manipulation, genuinely modest and fair-minded':s>=40?'Generally honest with typical social presentation':'May prioritise self-interest in social situations'}} 130}; 131 132function getLabel(s){return s>=80?'Very high':s>=60?'High':s>=40?'Average':s>=20?'Low':'Very low';} 133 134var state={mode:0,page:0,answers:{},phase:'quiz',email:'',name:'',scores:{}}; 135 136function calcScores(){ 137 var totals={E:[],A:[],C:[],N:[],O:[],H:[]}; 138 for(var i=0;i<ALL.length;i++){ 139 var v=state.answers[i]; 140 if(v===undefined)continue; 141 if(totals[ALL[i].trait])totals[ALL[i].trait].push(ALL[i].dir===1?v:(6-v)); 142 } 143 var out={}; 144 var keys=Object.keys(totals); 145 for(var k=0;k<keys.length;k++){ 146 var t=keys[k]; 147 var arr=totals[t]; 148 if(!arr.length){out[t]=50;continue;} 149 var sum=0;for(var j=0;j<arr.length;j++)sum+=arr[j]; 150 out[t]=Math.round(((sum/arr.length)-1)/4*100); 151 } 152 if('N' in out)out.N=100-out.N; 153 return out; 154} 155 156function pageItems(){ 157 var start=state.page*PG; 158 var items=[]; 159 for(var i=start;i<Math.min(start+PG,ALL.length);i++){ 160 items.push({text:ALL[i].text,trait:ALL[i].trait,dir:ALL[i].dir,idx:i}); 161 } 162 return items; 163} 164function totalPages(){return Math.ceil(TOTAL/PG);} 165function pageAnswered(){ 166 var items=pageItems(); 167 for(var i=0;i<items.length;i++){if(state.answers[items[i].idx]===undefined)return false;} 168 return true; 169}
170function allAnswered(){return Object.keys(state.answers).length>=TOTAL;} 171 172function render(){ 173 var el=document.getElementById('app'); 174 if(state.phase==='quiz')el.innerHTML=renderQuiz(); 175 else if(state.phase==='wellDone')el.innerHTML=renderWellDone(); 176 else el.innerHTML=renderResults(); 177 attachEvents(); 178} 179 180function renderQuiz(){ 181 var m=MODES[state.mode]; 182 var items=pageItems(); 183 var answered=Object.keys(state.answers).length; 184 var pct=Math.round((answered/TOTAL)*100); 185 var tp=totalPages(); 186 var they=state.mode===1?'me':'them'; 187 var html='<div class="tab-row">'; 188 for(var i=0;i<MODES.length;i++){ 189 html+='<button class="tab'+(state.mode===i?' active':'')+'" data-mode="'+i+'">'+MODES[i].label+'</button>'; 190 } 191 html+='</div>'; 192 html+='<p class="mode-intro">'+m.intro+'</p>'; 193 html+='<div class="quiz-body">'; 194 html+='<div class="progress-bar"><div class="progress-fill" style="width:'+pct+'%"></div></div>'; 195 html+='<p class="progress-text" style="margin-bottom:1rem">Page '+(state.page+1)+' of '+tp+' — '+pct+'% complete</p>'; 196 for(var q=0;q<items.length;q++){ 197 var item=items[q]; 198 html+='<div class="q-block"><p class="q-text">'+item.text+'</p>'; 199 html+='<div class="scale-row"><span class="scale-label">Not like '+they+'</span><div class="scale-btns">'; 200 for(var v=1;v<=5;v++){ 201 html+='<button class="scale-btn'+(state.answers[item.idx]===v?' selected':'')+'" data-idx="'+item.idx+'" data-val="'+v+'">'+v+'</button>'; 202 } 203 html+='</div><span class="scale-label right">Very like '+they+'</span></div></div>'; 204 } 205 html+='<div class="nav-row">'; 206 html+=state.page>0?'<button class="nav-btn" id="prev-btn">Back</button>':'<span></span>'; 207 html+='<span class="progress-text">'+answered+' of '+TOTAL+' answered</span>'; 208 if(state.page<tp-1){ 209 html+='<button class="nav-btn primary" id="next-btn"'+(pageAnswered()?'':' disabled style="opacity:0.4;cursor:not-allowed"')+'>Next</button>'; 210 } else { 211 html+='<button class="nav-btn primary" id="submit-btn"'+(allAnswered()?'':' disabled style="opacity:0.4;cursor:not-allowed"')+'>Finish</button>'; 212 } 213 html+='</div></div>'; 214 return html; 215} 216 217function renderWellDone(){ 218 return '<div class="email-gate"><h2>Profile complete!</h2><p style="color:#555;margin-bottom:16px">Enter your details and your personalised results will be emailed to you instantly.</p><input class="field" type="text" id="name-input" placeholder="Your first name"><input class="field" type="email" id="email-input" placeholder="[email protected]"><p class="error-msg" id="error-msg">Please enter a valid email address.</p><button class="reveal-btn" id="send-btn">Email me my results</button><p style="font-size:11px;color:#aaa;margin-top:8px">No spam. Unsubscribe any time.</p></div>'; 219} 220 221function renderResults(){ 222 var s=state.scores; 223 var m=MODES[state.mode]; 224 var pronoun=state.mode===1?'You':'They'; 225 var html='<div class="results">'; 226 html+='<h2>Personality profile: '+m.label+'</h2>'; 227 html+='<p class="results-sub">Based on the Big Five personality model + Honesty-Humility (HEXACO). Observational proxy rating only â not a clinical assessment.</p>'; 228 var tkeys=Object.keys(TMETA); 229 for(var i=0;i<tkeys.length;i++){ 230 var t=tkeys[i]; 231 var score=s[t]||50; 232 var meta=TMETA[t]; 233 html+='<div class="trait-row">'; 234 html+='<div class="trait-header"><span class="trait-name">'+meta.name+'</span><span class="trait-label">'+getLabel(score)+'</span></div>'; 235 html+='<div class="trait-bar-bg"><div class="trait-bar-fill" style="width:'+score+'%;background:'+meta.color+'"></div></div>'; 236 var d=meta.desc(score);html+='<p class="trait-desc">'+pronoun+' are '+d.charAt(0).toLowerCase()+d.slice(1)+'.</p>'; 237 html+='</div>'; 238 } 239 html+='<hr class="divider">'; 240 html+='<div class="disclaimer">This profile is for educational purposes only. It does not replace professional assessment. The Misfit Method uses personality profiling to help parents and educators understand behaviour patterns, not to diagnose conditions.</div>'; 241 html+='<div class="cta-block"><p style="font-size:13px;color:#666;margin-bottom:12px">Want to understand how this profile connects to your child's behaviour?</p><a href="https://parents.robbfalls.com" class="cta-link">Book a session with Robb</a></div>'; 242 html+='<div style="margin-top:1rem;text-align:center"><button class="nav-btn" id="restart-btn" style="font-size:13px">Start another profile</button></div>'; 243 html+='</div>'; 244 return html; 245} 246 247function attachEvents(){ 248 var modeBtns=document.querySelectorAll('[data-mode]'); 249 for(var i=0;i<modeBtns.length;i++){ 250 modeBtns[i].addEventListener('click',function(){ 251 state.mode=parseInt(this.dataset.mode);state.page=0;state.answers={};state.phase='quiz';render();window.scrollTo(0,0); 252 }); 253 } 254 var scaleBtns=document.querySelectorAll('.scale-btn'); 255 for(var j=0;j<scaleBtns.length;j++){ 256 scaleBtns[j].addEventListener('click',function(){ 257 state.answers[parseInt(this.dataset.idx)]=parseInt(this.dataset.val);render(); 258 }); 259 } 260 var prev=document.getElementById('prev-btn'); 261 if(prev)prev.addEventListener('click',function(){state.page--;render();window.scrollTo(0,0);}); 262 var next=document.getElementById('next-btn'); 263 if(next)next.addEventListener('click',function(){state.page++;render();window.scrollTo(0,0);}); 264 var submit=document.getElementById('submit-btn'); 265 if(submit)submit.addEventListener('click',function(){state.scores=calcScores();state.phase='wellDone';render();window.scrollTo(0,0);}); 266 var sendBtn=document.getElementById('send-btn');
267 if(sendBtn)sendBtn.addEventListener('click',function(){ 268 var emailEl=document.getElementById('email-input'); 269 var nameEl=document.getElementById('name-input'); 270 var errorEl=document.getElementById('error-msg'); 271 var email=emailEl?emailEl.value.trim():''; 272 var name=nameEl?nameEl.value.trim():''; 273 if(!email||email.indexOf('@')===-1){if(errorEl)errorEl.style.display='block';return;} 274 state.email=email;state.name=name||'there'; 275 var scores=calcScores(); 276 state.scores=scores; 277 // Send results email via EmailJS 278 try{ 279 emailjs.send('service_sq5h4se','personalityrobbfalls',{ 280 to_name:state.name, 281 to_email:email, 282 profile_type:MODES[state.mode].label, 283 score_E:scores.E+'%',label_E:getLabel(scores.E), 284 score_A:scores.A+'%',label_A:getLabel(scores.A), 285 score_C:scores.C+'%',label_C:getLabel(scores.C), 286 score_N:scores.N+'%',label_N:getLabel(scores.N), 287 score_O:scores.O+'%',label_O:getLabel(scores.O), 288 score_H:scores.H+'%',label_H:getLabel(scores.H) 289 }); 290 }catch(e){} 291 // Add to AWeber list in background 292 try{ 293 var formUrls={ 294 child:'https://forms.aweber.com/form/80/985777180.htm', 295 self:'https://forms.aweber.com/form/82/352144482.htm', 296 partner:'https://forms.aweber.com/form/48/786078748.htm' 297 }; 298 var mid=MODES[state.mode].id; 299 var url=formUrls[mid]+'?email='+encodeURIComponent(email)+'&name='+encodeURIComponent(state.name); 300 var iframe=document.createElement('iframe'); 301 iframe.style.display='none'; 302 iframe.src=url; 303 document.body.appendChild(iframe); 304 }catch(e){} 305 state.phase='results';render();window.scrollTo(0,0); 306 }); 307 var restart=document.getElementById('restart-btn'); 308 if(restart)restart.addEventListener('click',function(){state={mode:0,page:0,answers:{},phase:'quiz',email:'',name:'',scores:{}};render();window.scrollTo(0,0);}); 309} 310 311render(); 312</script>
312 313<p style="text-align:center;font-size:12px;color:#8aaac0;padding:2rem 0 1rem">© Robb Falls 2026</p> 314</body> 315</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.