wang2021/index.html at master · psyc-201/wang2021 · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Word Circle Task</title>
  <link rel="stylesheet" href="jspsych/jspsych.css">
  <link rel="stylesheet" href="experiment.css">

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

  <script src="jspsych/plugin-html-button-response.js"></script>
  <script src="jspsych/plugin-html-keyboard-response.js"></script>
  <script src="jspsych/plugin-fullscreen.js"></script>
  <script src="jspsych/plugin-survey-html-form.js"></script>
  <script src="jspsych/plugin-call-function.js"></script>
  <script src="https://unpkg.com/@jspsych-contrib/plugin-pipe"></script>


  <script defer src="experiment.js"></script>
  <script>
// This code was developed by Claude and in parallel with the jsPsych experiment code.
// I told Claude that I need to implement this experiment and asked for a html file for running it online.
// I uploaded the original paper and the ISC code they had and asked Claude to generate the code that
// would do the same task and calculation. I also did not know how they calculated the distance matrix and dissimilarity vector.
// So the calculation method was generated by Claude.
// I was worried about whether the calculation was correct for the ISC analysis, so I asked Claude with the prompt:
// "so for these data analyses code to work, my code is doing the right thing to convert coordinates?
// I am confused on how you did the calculations with the dissimilarity and vector and whether they are correctly processing the data for this analyses"
// and Claude confirmed that the code was correct.
/**
 * Process placements data to add distance matrix and dissimilarity vector
 * @param {Array} placements - Your existing placements array with word, x, y, etc.
 * @returns {Object} Original data plus distance_matrix and dissimilarity_vector
 */
    // ========================================
    // ISC DATA PROCESSING - ONLY FUNCTIONS ACTUALLY USED
    // ========================================

    /**
     * Process placements data to add distance matrix and dissimilarity vector
     * This is the MAIN function used by experiment.js
     * @param {Array} placements - Array of word placements with cx, cy coordinates
     * @returns {Object} Original data plus distance_matrix and dissimilarity_vector
     */
    function processPlacementsForISC(placements) {
      const n = placements.length;

      // Step 1: Calculate distance matrix using cx and cy (center coordinates)
      const distanceMatrix = Array(n).fill(null).map(() => Array(n).fill(0));

      for (let i = 0; i < n; i++) {
        for (let j = i + 1; j < n; j++) {
          // Use cx and cy (center coordinates) for more accurate distances
          const dx = placements[i].cx - placements[j].cx;
          const dy = placements[i].cy - placements[j].cy;
          const distance = Math.sqrt(dx * dx + dy * dy);
          distanceMatrix[i][j] = distance;
          distanceMatrix[j][i] = distance; // Symmetric
        }
      }

      // Step 2: Normalize the matrix to 0-1 range
      let min = Infinity;
      let max = -Infinity;

      // Find min and max (excluding diagonal)
      for (let i = 0; i < n; i++) {
        for (let j = 0; j < n; j++) {
          if (i !== j) {
            min = Math.min(min, distanceMatrix[i][j]);
            max = Math.max(max, distanceMatrix[i][j]);
          }
        }
      }

      // Create normalized matrix
      const normalizedMatrix = Array(n).fill(null).map(() => Array(n).fill(0));
      for (let i = 0; i < n; i++) {
        for (let j = 0; j < n; j++) {
          if (i === j) {
            normalizedMatrix[i][j] = 0;
          } else {
            normalizedMatrix[i][j] = (distanceMatrix[i][j] - min) / (max - min);
          }
        }
      }

      // Step 3: Convert to vector form (upper triangle only)
      const dissimilarityVector = [];
      for (let i = 0; i < n; i++) {
        for (let j = i + 1; j < n; j++) {
          dissimilarityVector.push(normalizedMatrix[i][j]);
        }
      }

      // Step 4: Extract word list in order
      const words = placements.map(p => p.word);

      // Verify we have the correct number of words
      const expectedVectorLength = (n * (n - 1)) / 2;
      console.log(`Processing ${n} words, creating ${dissimilarityVector.length} pairwise distances`);
      console.log(`✓ Vector length: ${dissimilarityVector.length} (expected: ${expectedVectorLength})`);

      return {
        n_words: n,
        words: words,
        placements: placements,
        distance_matrix: normalizedMatrix,
        dissimilarity_vector: dissimilarityVector,
        matrix_stats: {
          min_distance: min,
          max_distance: max,
          mean_normalized: dissimilarityVector.reduce((a, b) => a + b, 0) / dissimilarityVector.length
        }
      };
    }

    /**
     * Wrapper function called by experiment.js
     * Takes raw placement data and enhances it with ISC calculations
     * @param {Object} originalData - Data object containing placements array
     * @returns {Object} Enhanced data with ISC matrices and vectors
     */
    function enhanceDataWithISC(originalData) {
      if (!originalData.placements) {
        console.error('No placements found in data');
        return originalData;
      }

      // Process placements to get ISC data
      const iscData = processPlacementsForISC(originalData.placements);

      // Merge with original data
      const enhancedData = {
        ...originalData,
        ...iscData,
        isc_data_version: '1.0',
        isc_processing_timestamp: new Date().toISOString()
      };

      // Log summary
      console.log('ISC Data Enhancement Complete:');
      console.log(`- Words: ${iscData.n_words}`);
      console.log(`- Distance matrix: ${iscData.n_words}x${iscData.n_words}`);
      console.log(`- Dissimilarity vector: ${iscData.dissimilarity_vector.length} values`);
      console.log(`- Mean normalized distance: ${iscData.matrix_stats.mean_normalized.toFixed(3)}`);

      return enhancedData;
    }

    // ========================================
    // MAKE FUNCTIONS GLOBALLY AVAILABLE
    // ========================================

    // This is what experiment.js actually uses
    if (typeof window !== 'undefined') {
      window.ISCProcessor = {
        processPlacementsForISC,
        enhanceDataWithISC
      };
    }

  </script>
</head>
<body>

</body>
</html>