strategy-planner-quiz/index.html at main · lhearnsb/strategy-planner-quiz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Nonprofit Org Type Quiz</title>
  <meta property="og:title" content="Ready to Impress the Board and Empower Your Team?" />
  <meta property="og:description" content="Find your nonprofit org type based on alignment and structure." />
  <meta property="og:image" content="https://www.reflectplando.com/images/quiz-preview.png" />
  <meta property="og:url" content="https://www.reflectplando.com/quiz" />

<link rel="stylesheet" href="style.css">

</head>
<body>
  <section style="text-align: center; padding: 2rem 1rem; max-width: 600px; margin: auto;">
    <h1 class="quiz-hero-title">Is your organization’s decision-making style working for or against you?</h1>
    <p class="quiz-hero-subtitle">
      Take this quick quiz to find out—and unlock actionable steps to impress the board and empower your team.
    </p>
  </section>

  <!-- Quiz Form -->
  <form id="quizForm">
    <!-- Question 1 -->
    <div class="step active" data-step="1">
      <div class="question">
        <p>What best describes how your team sets goals?</p>
        <label><input type="radio" name="q1" value="0,0" required /> We’re guided by values but don’t always have clear targets.</label><br/>
        <label><input type="radio" name="q1" value="0,1" /> We track progress toward program goals but not revenue.</label><br/>
        <label><input type="radio" name="q1" value="0,2" /> We have performance and financial metrics, but they’re siloed.</label><br/>
        <label><input type="radio" name="q1" value="0,3" /> We set shared goals across departments with regular reviews.</label>
      </div>
    </div>

    <!-- Question 2 -->
    <div class="step" data-step="2">
      <div class="question">
        <p>How accessible is your data to people across your team?</p>
        <label><input type="radio" name="q2" value="0,0" required /> Not accessible.</label><br/>
        <label><input type="radio" name="q2" value="1,0" /> Only select leaders have access.</label><br/>
        <label><input type="radio" name="q2" value="2,0" /> It’s technically accessible, but underused.</label><br/>
        <label><input type="radio" name="q2" value="3,0" /> Easy to access and actively used in decision-making.</label>
      </div>
    </div>

    <!-- Question 3 -->
    <div class="step" data-step="3">
      <div class="question">
        <p>What’s your relationship with data?</p>
        <label><input type="radio" name="q3" value="0,0" required /> We collect data for funders, but it doesn’t inform decisions.</label><br/>
        <label><input type="radio" name="q3" value="1,0" /> We wish we had better data but aren’t sure where to start.</label><br/>
        <label><input type="radio" name="q3" value="2,0" /> We have plenty of data, but it’s not always actionable.</label><br/>
        <label><input type="radio" name="q3" value="3,0" /> Integrated data from multiple teams/sources helps us make decisions and tell our story.</label>
      </div>
    </div>

    <!-- Question 4 -->
    <div class="step" data-step="4">
      <div class="question">
        <p>How often do you revisit or adjust your metrics?</p>
        <label><input type="radio" name="q4" value="0,0" required /> Rarely. We mostly just report on what we already track.</label><br/>
        <label><input type="radio" name="q4" value="1,0" /> When funders ask or something major changes.</label><br/>
        <label><input type="radio" name="q4" value="2,0" /> We check in occasionally but don’t have a set cadence.</label><br/>
        <label><input type="radio" name="q4" value="3,0" /> We regularly review and evolve our metrics based on performance and revenue outcomes.</label>
      </div>
    </div>

    <!-- Question 5 -->
    <div class="step" data-step="5">
      <div class="question">
        <p>How do fundraising and programs work together?</p>
        <label><input type="radio" name="q5" value="0,0" required /> Like neighbors who nod but rarely talk.</label><br/>
        <label><input type="radio" name="q5" value="0,1" /> They team up when deadlines demand it.</label><br/>
        <label><input type="radio" name="q5" value="0,2" /> They share information but aren’t truly aligned.</label><br/>
        <label><input type="radio" name="q5" value="0,3" /> They work closely and use shared metrics to plan and reflect.</label>
      </div>
    </div>

    <!-- Question 6 -->
    <div class="step" data-step="6">
      <div class="question">
        <p>What challenge feels most familiar right now?</p>
        <label><input type="radio" name="q6" value="0,0" required /> We want to make a difference, but it’s unclear what to focus on.</label><br/>
        <label><input type="radio" name="q6" value="0,1" /> We feel we're making a difference within our own team but don’t know the effect on other teams.</label><br/>
        <label><input type="radio" name="q6" value="0,2" /> We have clear goals that are aligned across the organization and know we are making an impact, but accessing reports that demonstrate this is draining.</label><br/>
        <label><input type="radio" name="q6" value="0,3" /> Our goals are aligned, and we have access to accurate reports and/or dashboards to track progress and inform decisions in a timely manner.</label>
      </div>
    </div>

    <!-- Next Button -->
    <button type="button" id="nextBtn">Next</button>
  </form>

  <!-- Org Type Result (Initially Hidden) -->
  <div id="result" class="result" style="display:none;">
    <h2>Your Org Type: <span id="orgType"></span></h2>
    <p id="orgDesc"></p>
    <button id="downloadBtn">Download My Strategy Snapshot</button>
  </div>

  <!-- Email Capture Form (Initially Hidden) -->
  <div id="emailForm" class="email-form" style="display:none;">
    <h3>Enter Your Details to Receive Your Download</h3>
    <form id="emailCaptureForm">
      <input type="email" name="email" placeholder="Enter your email" required />
      <input type="text" name="name" placeholder="Name (optional)" />
      <input type="text" name="title" placeholder="Title (optional)" />
      <input type="text" name="orgName" placeholder="Organization (optional)" />
      <button type="submit">Send My Personalized Planner</button>
    </form>
  </div>

  <!-- Thank You Page (Initially Hidden) -->
  <div id="thankYou" class="thank-you" style="display:none;">
    <h1>Your Personalized Strategy Planner Is Ready!</h1>
    <p>Download it now—or check your inbox for a copy you can share with your team.</p>
    <button id="downloadNow">Download Now</button>
  </div>

  <script src="script.js"></script>


</body>
</html>