put at root

transatlantic-comppsych · Aug 16, 2024 · ce7b262 · ce7b262
1 parent 2e3c294
commit ce7b262
Show file tree

Hide file tree

Showing 12 changed files with 154 additions and 0 deletions.
diff --git a/cranach_painting_pairs.csv b/cranach_painting_pairs.csv
@@ -0,0 +1,46 @@
+Painting 1,Painting 2
+Adam and Eve (1528),The Judgment of Paris (c. 1528)
+Adam and Eve (1528),Venus (1532)
+Adam and Eve (1528),Portrait of a Lady (c. 1526)
+Adam and Eve (1528),The Three Graces (1531)
+Adam and Eve (1528),Cupid Complaining to Venus (1525)
+Adam and Eve (1528),Portrait of Johann Friedrich the Magnanimous (c. 1531)
+Adam and Eve (1528),St. Catherine of Alexandria (1509)
+Adam and Eve (1528),Madonna and Child (1534)
+Adam and Eve (1528),The Golden Age (1530)
+The Judgment of Paris (c. 1528),Venus (1532)
+The Judgment of Paris (c. 1528),Portrait of a Lady (c. 1526)
+The Judgment of Paris (c. 1528),The Three Graces (1531)
+The Judgment of Paris (c. 1528),Cupid Complaining to Venus (1525)
+The Judgment of Paris (c. 1528),Portrait of Johann Friedrich the Magnanimous (c. 1531)
+The Judgment of Paris (c. 1528),St. Catherine of Alexandria (1509)
+The Judgment of Paris (c. 1528),Madonna and Child (1534)
+The Judgment of Paris (c. 1528),The Golden Age (1530)
+Venus (1532),Portrait of a Lady (c. 1526)
+Venus (1532),The Three Graces (1531)
+Venus (1532),Cupid Complaining to Venus (1525)
+Venus (1532),Portrait of Johann Friedrich the Magnanimous (c. 1531)
+Venus (1532),St. Catherine of Alexandria (1509)
+Venus (1532),Madonna and Child (1534)
+Venus (1532),The Golden Age (1530)
+Portrait of a Lady (c. 1526),The Three Graces (1531)
+Portrait of a Lady (c. 1526),Cupid Complaining to Venus (1525)
+Portrait of a Lady (c. 1526),Portrait of Johann Friedrich the Magnanimous (c. 1531)
+Portrait of a Lady (c. 1526),St. Catherine of Alexandria (1509)
+Portrait of a Lady (c. 1526),Madonna and Child (1534)
+Portrait of a Lady (c. 1526),The Golden Age (1530)
+The Three Graces (1531),Cupid Complaining to Venus (1525)
+The Three Graces (1531),Portrait of Johann Friedrich the Magnanimous (c. 1531)
+The Three Graces (1531),St. Catherine of Alexandria (1509)
+The Three Graces (1531),Madonna and Child (1534)
+The Three Graces (1531),The Golden Age (1530)
+Cupid Complaining to Venus (1525),Portrait of Johann Friedrich the Magnanimous (c. 1531)
+Cupid Complaining to Venus (1525),St. Catherine of Alexandria (1509)
+Cupid Complaining to Venus (1525),Madonna and Child (1534)
+Cupid Complaining to Venus (1525),The Golden Age (1530)
+Portrait of Johann Friedrich the Magnanimous (c. 1531),St. Catherine of Alexandria (1509)
+Portrait of Johann Friedrich the Magnanimous (c. 1531),Madonna and Child (1534)
+Portrait of Johann Friedrich the Magnanimous (c. 1531),The Golden Age (1530)
+St. Catherine of Alexandria (1509),Madonna and Child (1534)
+St. Catherine of Alexandria (1509),The Golden Age (1530)
+Madonna and Child (1534),The Golden Age (1530)
diff --git a/cranach_pairwise_comparison.html b/cranach_pairwise_comparison.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lucas Cranach Painting Comparison</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+        .pair-container {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 20px;
+        }
+        .pair-container img {
+            width: 400px;  /* Set a fixed width */
+            height: 400px; /* Set a fixed height */
+            object-fit: cover; /* Ensures the image covers the area while preserving aspect ratio */
+        }
+        .pair-container button {
+            display: block;
+            margin-top: 10px;
+            padding: 10px 20px;
+            font-size: 16px;
+        }
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <h1>Lucas Cranach Painting Pairwise Comparison</h1>
+    <p>Select your preferred painting in each pair.</p>
+
+    <div id="comparison-container"></div>
+    <button id="export-results" class="hidden">Export Results as CSV</button>
+
+    <script>
+        const pairs = [
+            {img1: 'images/Adam_and_Eve.jpg', img2: 'images/Judgment_of_Paris.jpg'},
+            {img1: 'images/Venus.jpg', img2: 'images/Portrait_of_a_Lady.jpg'},
+            {img1: 'images/Three_Graces.jpg', img2: 'images/Cupid_Complaining_to_Venus.jpg'},
+            {img1: 'images/Adam_and_Eve.jpg', img2: 'images/Venus.jpg'},
+            {img1: 'images/Portrait_of_a_Lady.jpg', img2: 'images/Three_Graces.jpg'},
+            {img1: 'images/Adam_and_Eve.jpg', img2: 'images/Portrait_of_a_Lady.jpg'},
+            {img1: 'images/Cupid_Complaining_to_Venus.jpg', img2: 'images/Judgment_of_Paris.jpg'},
+            {img1: 'images/Venus.jpg', img2: 'images/Judgment_of_Paris.jpg'},
+            {img1: 'images/Cupid_Complaining_to_Venus.jpg', img2: 'images/Portrait_of_a_Lady.jpg'},
+            {img1: 'images/Three_Graces.jpg', img2: 'images/Judgment_of_Paris.jpg'}
+        ];
+
+        let results = [];
+        let currentPair = 0;
+
+        function shuffle(array) {
+            for (let i = array.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [array[i], array[j]] = [array[j], array[i]];
+            }
+        }
+
+        function renderPair(pair) {
+            const container = document.getElementById('comparison-container');
+            container.innerHTML = `
+                <div class="pair-container">
+                    <div>
+                        <img src="${pair.img1}" alt="Painting 1">
+                        <button onclick="choosePainting('${pair.img1}')">Choose This</button>
+                    </div>
+                    <div>
+                        <img src="${pair.img2}" alt="Painting 2">
+                        <button onclick="choosePainting('${pair.img2}')">Choose This</button>
+                    </div>
+                </div>
+            `;
+        }
+
+        function choosePainting(choice) {
+            results.push({pair: pairs[currentPair], choice: choice});
+            currentPair++;
+            if (currentPair < pairs.length) {
+                renderPair(pairs[currentPair]);
+            } else {
+                document.getElementById('comparison-container').innerHTML = '<h2>Thank you for your participation!</h2>';
+                document.getElementById('export-results').classList.remove('hidden');
+            }
+        }
+
+        shuffle(pairs);  // Shuffle the pairs
+        renderPair(pairs[currentPair]);  // Start with the first pair
+
+        document.getElementById('export-results').addEventListener('click', () => {
+            let csvContent = "data:text/csv;charset=utf-8,Pair,Choice\\n";
+            results.forEach(result => {
+                csvContent += `${result.pair.img1} vs ${result.pair.img2},${result.choice}\\n`;
+            });
+            const encodedUri = encodeURI(csvContent);
+            const link = document.createElement("a");
+            link.setAttribute("href", encodedUri);
+            link.setAttribute("download", "cranach_results.csv");
+            document.body.appendChild(link);
+            link.click();
+        });
+    </script>
+</body>
+</html>
diff --git a/images/Adam_and_Eve.jpg b/images/Adam_and_Eve.jpg
diff --git a/images/Cupid_Complaining_to_Venus.jpg b/images/Cupid_Complaining_to_Venus.jpg
diff --git a/images/Golden_Age.jpg b/images/Golden_Age.jpg
diff --git a/images/Judgment_of_Paris.jpg b/images/Judgment_of_Paris.jpg
diff --git a/images/Madonna_and_Child.jpg b/images/Madonna_and_Child.jpg
diff --git a/images/Portrait_of_Johann_Friedrich.jpg b/images/Portrait_of_Johann_Friedrich.jpg
diff --git a/images/Portrait_of_a_Lady.jpg b/images/Portrait_of_a_Lady.jpg
diff --git a/images/St_Catherine_of_Alexandria.jpg b/images/St_Catherine_of_Alexandria.jpg
diff --git a/images/Three_Graces.jpg b/images/Three_Graces.jpg
diff --git a/images/Venus.jpg b/images/Venus.jpg