windowcards/index.html at main · alfieprojectsdev/windowcards · 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
126
127
128
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Math Window Cards</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="print-header">
    <div>Name: ______________________________</div>
    <div>Grade: ______________________________</div>
    <div>Date: _______________</div>
  </div>

  <h1 id="mainTitle">Math Window Cards</h1>

  <div class="controls">
    <!-- Row 1: Inputs -->
    <div class="control-row">
      <label>
        Grid: Rows × Columns
        <div style="display: flex; gap: 0.5rem;">
          <input type="number" id="numRows" value="10" min="1" max="100" style="width: 5rem;" />
          ×
          <input type="number" id="numCols" value="10" min="1" max="100" style="width: 5rem;" />
        </div>
      </label>

      <label>
        Font Size (pt)
        <input type="number" id="fontSize" value="10" min="8" max="36" />
      </label>

      <label>
        Digits (1–6)
        <input type="number" id="numDigits" value="4" min="1" max="6" />
      </label>

      <label>
        Operator
        <select id="operator">
          <option value="+">Addition (+)</option>
          <option value="-">Subtraction (−)</option>
          <option value="×">Multiplication (×)</option>
          <option value="÷">Division (÷)</option>
        </select>
      </label>

      <label id="carryLabel">
        <input type="checkbox" id="avoidCarrying" />
        Avoid Carrying
      </label>

      <label id="borrowLabel">
        <input type="checkbox" id="avoidBorrowing" />
        Avoid Borrowing
      </label>
    </div>

    <!-- Rule Builder Custom Constraints -->
    <div class="control-row" style="margin-top: 0.5rem; width: 100%;">
      <div class="rule-builder-container"
        style="background: #f5f5f5; padding: 1rem; border-radius: 4px; border: 1px solid #ddd; width: 100%;">
        <h4 style="margin-top: 0; margin-bottom: 0.5rem; font-size: 0.95rem; color: #444;">Custom Constraints</h4>

        <div id="rule-list" style="display: flex; flex-direction: column; gap: 0.5rem;">
        </div>

        <button id="btn-add-rule"
          style="margin-top: 0.75rem; background: #e0e0e0; border: 1px solid #ccc; font-size: 0.85rem; padding: 0.25rem 0.5rem;">+
          Add Rule</button>
      </div>
    </div>

    <!-- Row 2: Buttons -->
    <div class="control-row">
      <button onclick="generate()">Generate</button>
      <button onclick="toggleAnswers()">Toggle Answers</button>
      <button onclick="togglePracticeMode()">Practice Mode</button>
      <button onclick="generate()">New Problems</button>
      <button onclick="window.print()">Print</button>
    </div>
  </div>

  <p class="print-note">Tip: Click "Toggle Answers" to hide answers before printing. Generate again to get a new set.
  </p>

  <div class="cards" id="cardContainer"></div>

  <script type="module" src="./src/main.js"></script>

  <!-- Rule Builder Template -->
  <template id="rule-row-template">
    <div class="rule-row"
      style="display: flex; gap: 0.5rem; align-items: center; background: white; padding: 0.5rem; border-radius: 4px; border: 1px solid #ddd;">
      <select class="rule-field" style="padding: 0.25rem;">
        <option value="a">Operand A</option>
        <option value="b">Operand B</option>
        <option value="result">Result</option>
      </select>

      <select class="rule-operator" style="padding: 0.25rem;">
        <option value="EQUALS">Equals (=)</option>
        <option value="NOT_EQUALS">Not Equals (≠)</option>
        <option value="GREATER_THAN">Greater Than (&gt;)</option>
        <option value="LESS_THAN">Less Than (&lt;)</option>
      </select>

      <select class="rule-value-type" style="padding: 0.25rem;">
        <option value="literal">Number</option>
        <option value="reference">Field</option>
      </select>

      <input type="text" class="rule-value" placeholder="e.g., 5 or 'b'" style="padding: 0.25rem; width: 6rem;">

      <button class="btn-remove-rule"
        style="color: #d32f2f; background: none; border: none; cursor: pointer; font-weight: bold; padding: 0.25rem 0.5rem; margin-left: auto;">✕</button>
    </div>
  </template>

  <!-- Add GoatCounter tracking -->
  <script data-goatcounter="https://ithinkandicode.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</body>

</html>