pemm-assessment/index.html at main · PECommunity/pemm-assessment · 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
<!DOCTYPE html>
<html lang="en" id="app-html">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title data-text="title">Platform Engineering Maturity Model Assessment</title>
    <link rel="stylesheet" href="./assets/style.css" />
  </head>
  <body>
    <nav class="languages">
      <span data-text="language_label">Language:</span>
      <ul>
        <a href="./">English</a>
        <a href="./?lang=zh">中文</a>
        <a href="./?lang=pt">Portuguese</a>
      </ul>
    </nav>

    <main class="container">
      <article class="form-section">
        <header>
          <h1 data-text="title">Platform Engineering Maturity Model Assessment</h1>
          <div class="progress-indicator">
            <span id="page-indicator">Page 1 of 5</span>
          </div>
        </header>
        <div class="intro" id="intro-section">
          <p data-text="intro">We are looking for feedback on this pilot assessment, so please
            <a href="https://docs.google.com/forms/d/1SW8NE-7E2zjhoun4jklRPmH5sYgJ_3rTw2D_FoOwViA/viewform" target="_blank">share your thoughts</a>.</p>
        </div>

        <div id="page-content">
          <form id="maturity-form">
            <!-- Questions will be dynamically loaded from YAML data -->
          </form>
        </div>

        <div class="pagination-controls">
          <button type="button" id="prev-btn" onclick="previousPage()" disabled>← Previous</button>
          <button type="button" id="next-btn" onclick="nextPage()">Next →</button>
          <button type="button" id="submit-btn" onclick="submitAssessment()" style="display: none;">Submit Assessment</button>
        </div>
      </article>

      <article class="chart-section" id="results-section" style="display: none;">
        <header>
          <h1 data-text="results_title">Assessment Results</h1>
        </header>

        <div class="charts">
          <canvas id="maturity-spider"></canvas>
          <table id="maturity-matrix"></table>
        </div>

        <div id="maturity-scores" class="scores"></div>

        <div class="feedback-message">
          <p data-text="feedback_message">Thank you for using our Platform Engineering Maturity Model assessment! We hope you found it valuable. While you're here, we'd love to hear your thoughts and feedback to help us improve this tool.</p>
        </div>

        <div class="action-buttons">
          <button onclick="returnToAssessment()" class="return-button" id="app-return-button">← Back to Assessment</button>
        </div>

        <div class="share-button">
          <a onclick="copyURLToClipboard(this)" data-text="copy_link_text">📋 Copy Shareable Link</a>
          <a href="https://docs.google.com/forms/d/1SW8NE-7E2zjhoun4jklRPmH5sYgJ_3rTw2D_FoOwViA/viewform" target="_blank" data-text="share_feedback_text">💬 Share Feedback</a>
        </div>
      </article>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
    <script src="./assets/app.js"></script>
  </body>
</html>