Full Q
# Strategy By Design / Leadership Services Questionnaire
This package contains:
1. **Scope & Architecture**
2. **Squarespace implementation** (Form Block + Code Block)
3. **Client-side survey (HTML + JS)**
4. **Serverless endpoint (Cloudflare Workers)** for ChatGPT report generation
5. **Prompt template**
6. **10 example reports** are provided as a downloadable file alongside this doc in chat.
7. **Revised Excel** with structured questions (full + short survey) is provided as a downloadable file alongside this doc in chat.
---
## 1) Scope & Architecture
**Goal**
Publish a leadership questionnaire on `somethingchanged.co.uk` (Squarespace), generate an instant feedback report powered by ChatGPT, and **store anonymised results** so you can track trends.
**Key Requirements**
* 15-question full survey (Likert 1–5) + 4-question short version.
* Real‑time feedback report for the respondent.
* Anonymised storage of responses inside Squarespace (no PII).
* Survey link shareable on LinkedIn.
* System should use your **ChatGPT/OpenAI** account (not Perplexity).
**Anonymisation approach**
* We store only **Industry, Company Size, Region, Overall Score, Tier, Timestamp, Anonymous ID** in Squarespace.
* Free‑text “Biggest challenge” is **not** stored in Squarespace by default (optional), preventing inadvertent PII.
**High‑level architecture**
* **Squarespace page** contains:
* A **visible survey UI** (Code Block) that renders questions and handles scoring.
* A **hidden Squarespace Form Block** with a few anonymised fields. JS copies the minimal metrics into the Form Block and auto‑submits it so results appear in **Squarespace Form Submissions** (and any connected storage like Google Sheets if you enable it).
* **Serverless endpoint** (Cloudflare Worker, Vercel, or Netlify):
* Receives the survey answers (no PII), crafts a prompt, calls OpenAI (ChatGPT API), and returns a formatted **feedback report**.
* Your **OpenAI API key** stays server‑side, never exposed in the browser.
**Outputs you receive**
* Revised Excel with structured questions and scoring.
* Frontend code for Squarespace Code Block.
* Worker code to deploy (copy‑paste) with one env variable: `OPENAI_API_KEY`.
* Step‑by‑step deployment instructions.
---
## 2) Squarespace Setup (anonymised storage)
### A) Create a hidden **Form Block** (for storage inside Squarespace)
1. Edit the page → add a **Form** block.
2. Fields to create (all **Short Text**):
* **Anon ID**
* **Industry**
* **Size**
* **Region**
* **Overall Score**
* **Tier**
* **Timestamp**
3. Storage → enable **Form Submissions** (and optionally Google Drive/Sheets or Email).
4. After saving, in the page editor hover the block → click the “•••” menu → **Copy Block ID**. Note the value (e.g., `block-yui_3_17_2_1_...`).
5. Style → **Hide** the Form Block with a small code injection or use the CSS in the Code Block below (we’ll target your specific block id and set `display:none`).
> Why a Form Block? Custom code cannot write directly to Squarespace’s submissions database. The trick is: render the survey with a Code Block, then programmatically fill the **hidden Form Block** and trigger **Submit**. Your anonymised stats will then appear in Squarespace’s normal submissions UI.
### B) Add a **Code Block** (the actual survey UI)
* Place it **above** or **below** the hidden Form Block.
* Paste the **HTML/JS/CSS** from section **3) Client Code** below.
* Replace `YOUR_FORM_BLOCK_ID_HERE` with the id you copied in step A‑4.
* Replace `YOUR_WORKER_URL` with your Cloudflare Worker URL once deployed.
---
## 3) Client Code (paste into a Squarespace Code Block)
> This renders the full 15‑question survey + 4‑question short survey, computes the score, stores anonymised metrics in your hidden Form Block, and calls your serverless endpoint for the ChatGPT feedback report.
```html
```
> Replace both `YOUR_FORM_BLOCK_ID_HERE` entries with your actual block id.
---
## 4) Serverless Endpoint (Cloudflare Workers)
Create a new Worker → **Quick Edit** → paste this code → set a secret `OPENAI_API_KEY`.
```js
export default {
async fetch(request, env) {
if (request.method !== 'POST') return new Response('Use POST', {status:405});
const body = await request.json();
const { demographics, biggest_challenge, answers, overall } = body;
const prompt = `You are Strategy By Design's assistant. Create a concise leadership feedback report.\n\n` +
`Demographics (anonymised): ${JSON.stringify(demographics)}\n` +
`Overall score: ${overall.score} (tier: ${overall.tier})\n` +
`Answers (1-5): ${JSON.stringify(answers)}\n` +
`Biggest challenge: ${biggest_challenge || '—'}\n\n` +
`Write:\n` +
`1) 3-sentence overview tailored to the industry.\n` +
`2) Strengths (bullets): areas rated 4-5.\n` +
`3) Priority gaps (bullets): areas rated 1-2.\n` +
`4) 90-day plan: 4 bullet recommendations targeting the weakest areas.\n` +
`5) Suggested package (Bronze diagnostic, Silver alignment, or Gold transformation) based on the score thresholds (Bronze <50, Silver 50-74, Gold 75+).`;
const completion = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${env.OPENAI_API_KEY}`
},
body: JSON.stringify({
model: 'gpt-4o-mini',
messages: [{role:'system', content:'You are a crisp, pragmatic leadership consultant.'}, {role:'user', content: prompt}],
temperature: 0.4
})
});
if(!completion.ok){
const txt = await completion.text();
return new Response(`OpenAI error: ${txt}`, {status:500});
}
const data = await completion.json();
const text = data.choices?.[0]?.message?.content || 'No response.';
return new Response(text, { headers: { 'Content-Type': 'text/plain; charset=utf-8' } });
}
}
```
**Deploy steps**
1. Create a Cloudflare account → Workers & Pages → **Create Worker**.
2. Quick Edit → paste the code above.
3. **Settings → Variables** → add **Secret** `OPENAI_API_KEY`.
4. Save & Deploy → copy the Worker URL.
5. Paste the URL into the Code Block (`WORKER_URL`).
*Alternatives:* Equivalent functions for Vercel (`/api/report.js`) or Netlify. The key requirement is keeping your API key server‑side.
---
## 5) Prompt Template (for your Worker)
You can tailor the prompt for tone, sector emphasis, or house style. The Worker ships with a clear template. Two simple knobs:
* `model`: fast & economic `gpt-4o-mini` (switch to larger models if desired).
* `temperature`: 0.2–0.5 for concise recommendations.
---
## 6) Pasting into Squarespace – Quick Guide
1. **Add the hidden Form Block** with fields listed in §2A. Copy its **Block ID**.
2. **Add a Code Block** on the same page. Paste the code from §3.
3. Replace `YOUR_FORM_BLOCK_ID_HERE` with the actual id in both the CSS and the JS selector.
4. Deploy the Worker (§4) and paste your `WORKER_URL` into the Code Block.
5. Save and test (use private browsing to confirm no PII is stored).
6. Optional: In the Form Block’s Storage, connect **Google Drive/Sheets** to mirror anonymised metrics to a spreadsheet for analysis.
---
## 7) Data & Privacy Notes
* No personal data is collected; free text is excluded from storage by default.
* The anonymous submission stored in Squarespace includes: industry, size, region, score, tier, timestamp, anon id.
* You can add a short privacy note above the form: *“We don’t collect personal data. Results are anonymised and aggregated.”*
---
## 8) Support & Next Iterations
* Want a branded design? Swap the CSS in §3.
* Want to email the report to respondents? Add an optional email field and only send it to the Worker (do not store it in Squarespace). The Worker can send email via a service (e.g., Resend/Mailgun).
* Want the 3–4 question **pulse** only? Hide the Full Survey fieldset (CSS) and rescale.
---
**That’s it — paste the client code, deploy the Worker, and you’re live.**