PageSourceSearch

https://familypersonality.netlify.app/

html familypersonality.netlify.app collected 2026-10-03 10:43:18 UTC 19,180 bytes, 315 lines download raw bytes

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+' &mdash; '+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&#39;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">&copy; 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.