diff --git a/README.md b/README.md index 386a808..163eb19 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,9 @@ Uses: - Save SVG as PNG: https://github.com/exupero/saveSvgAsPng - CSV parser: https://github.com/d3/d3-dsv +# Latest updtes: +- 27/06/2026: Swiched to tabbed input, survey style input as default + ### TODO - Support for multiple scales - Support for outcome categories diff --git a/index.html b/index.html index 01b7e26..b7ef4c8 100644 --- a/index.html +++ b/index.html @@ -62,7 +62,7 @@ #input-container { margin: 0; } - #input-data { + textarea#input-data { margin: 0; border: 1px solid darkgray; padding: 0; @@ -126,35 +126,9 @@ color: red; } - #alt-open { - color:#5599EE; - font-weight: bold; - cursor: pointer; - } - - #alt-open:hover { - text-decoration: underline; - } - - #alt-open:active { - color: black; - } - - #alt-modal { - display: none; - flex-direction: column; - align-items: center; - justify-content: flex-start; - position: absolute; - width: 700px; - padding: 30px; - background-color: #DDD; - top: 50px; - box-shadow: rgba(0,0,0,0.3) 15px 15px; - } - - #alt-data { + textarea#alt-data { width: 80%; + height: 100px; resize: none; margin: 20px; overflow: scroll; @@ -186,73 +160,124 @@ border: 1px solid darkgray; } + /* Tab Navigation Styles */ + .tab-container { + margin-top: 20px; + } + + .tab-nav { + display: flex; + border-bottom: 2px solid #ddd; + margin-bottom: 0; + } + + .tab-button { + background-color: #f8f9fa; + border: 1px solid #ddd; + border-bottom: none; + padding: 12px 20px; + cursor: pointer; + font-size: 14px; + font-weight: bold; + color: #333; + margin-right: 2px; + transition: background-color 0.3s; + border-radius: 5px 5px 0 0; + } + + .tab-button:hover { + background-color: #e9ecef; + } + + .tab-button.active { + background-color: white; + color: #5599EE; + border-bottom: 2px solid white; + margin-bottom: -2px; + } + + .input-style-page { + display: none; + padding: 20px; + border: 1px solid #ddd; + border-top: none; + background-color: white; + } + + .input-style-page.active { + display: block; + } + -
-
✕
-
-

Are your data coming from a survey tool?

- -
- Qualtrics and Survey Monkey exports should be almost ready to go. - just make sure you add 'importance' and 'satisfaction' to each column (first row of your data). -
- (Sample data included for you to play around with) -
- -
- - -
-
 
-

Opportunity Score and Map Generator (beta)

-

Input data

- + + + For more information about the Opportunity Score and Map, check this blog post. +
+ This is an open-source tool, currently in beta. Please file issues or bugs in the GitHub repo, + +
- -

+
- - - - - - -
outcomeimportancesatisfaction
- - + +
+
Input: Survey data (row per response)
+
Input: Row per datapoint
+
+ + +
+ Use this tab if your data comes from a survey tool. Each row should be a response from a unique participant. +
    +
  • Paste your tab-separated data below.
    • +
  • Columns contain importance and satisfaction for each outcome. This means that each outcome appears in two columns.
    • +
  • Qualtrics and Survey Monkey exports should be almost ready to go. just make sure you add 'importance' and 'satisfaction' labels to each column (first row of your data).
    • +
  • importance and satisfaction should be in a 1-5 scale (1=low importance/5=high importance; 1=low satisfaction/5=high satisfaction).
    • +
  • Sample data included for you to play around with.
    • +
+ +
+ + +
+ Use this tab if your data is already in the format of one row per outcome. This means that each unique participant probably has multiple rows. +
    +
  • Paste tab-separated data formatted in 3 columns [outcome, importance, satisfaction] +
    or
    import a CSV file that includes the same 3 columns. +
    • +
  • importance and satisfaction should be in a 1-5 scale (1=low importance/5=high importance; 1=low satisfaction/5=high satisfaction).
    • +
+ + + + + + + +
outcomeimportancesatisfaction
+ +
+ + +
+ +

+
-
-
-
-
- ← Sample data has been included for you to play around with. Click [Clear data] to enter your own data.

- For more information about the Opportunity Score and Map, check this blog post. -
-
- This an open-source tool, currently in beta. Please file issues or bugs in the GitHub repo, -
+
+ +
@@ -286,6 +311,7 @@

Output log: