TestResult:자존감: Difference between revisions

Line 1:

<~~iframe id~~="~~self~~-~~esteem-frame~~"

<!DOCTYPE html>

src="https://~~test~~.~~magazine-d~~.~~com~~/~~self-esteem-test-korean-result~~/"

~~style~~="width:~~100%~~; ~~height~~:~~500px~~; ~~border~~:~~none~~; ~~margin~~:0; ~~padding~~:0;"></~~iframe~~>

<head>

</head>

<body>

const urlParams = new URLSearchParams(window.location.search);

const highlightIndex = parseInt(urlParams.get('point') || -1);

const labels = [...Array(101).keys()]; // 0~100점

const dataValues = [

0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,

1,1,1,2,2,2,3,4,5,6,7,8,10,11,14,16,19,22,25,29,33,38,42,

48,53,59,66,72,79,86,93,100,106,113,120,126,131,136,141,145,

148,150,152,152,153,152,150,147,144,140,135,129,124,117,111,

104,97,90,83,77,70,64,57,51,46,41,36,32,28,24,21

];

const percentileData = [

100.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,

100.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,99.98,

99.96,99.94,99.92,99.88,99.84,99.80,99.74,99.66,99.56,99.44,

99.30,99.14,98.94,98.72,98.44,98.12,97.74,97.30,96.80,96.22,

95.56,94.80,93.96,93.00,91.94,90.76,89.44,88.00,86.42,84.70,

82.84,80.84,78.72,76.46,74.06,71.54,68.92,66.20,63.38,60.48,

57.52,54.53,51.49,48.45,45.39,42.35,39.35,36.41,33.53,30.73,

28.03,25.45,22.97,20.63,18.42,16.34,14.39,12.59,10.94,9.40,

8.00,6.72,5.58,4.56,3.64,2.82,2.10,1.46,0.90,0.42,0.0

];

const backgroundColors = labels.map((_, i) =>

i === highlightIndex ? '#f9e16b' : '#ededed'

);

const ctx = document.getElementById('barChart').getContext('2d');

const chart = new Chart(ctx, {

type: 'bar',

data: {

labels: labels,

datasets: [{

label: '자존감 점수별 빈도',

data: dataValues,

backgroundColor: backgroundColors,

borderWidth: 1,

borderColor: '#cccccc'

}]

},

options: {

responsive: true,

plugins: {

title: {

display: true,

text: '자존감 점수 분포 (빈도 기반)'

},

legend: { display: false },

tooltip: {

callbacks: {

label: function(context) {

const idx = context.dataIndex;

const freq = dataValues[idx];

const pct = percentileData[idx].toFixed(2);

return `빈도: ${freq}, 상위 백분위: ${pct}%`;

}

},

onClick: (evt, elements) => {

if (elements.length > 0) {

const index = elements[0].index;

const score = labels[index] + '점';

const freq = dataValues[index];

const pct = percentileData[index].toFixed(2);

alert(`점수: ${score}\n빈도: ${freq}\n상위 백분위: ${pct}%`);

}

},

scales: {

x: {

title: { display: true, text: '자존감 점수 (0 ~ 100)' },

ticks: {

autoSkip: true,

maxTicksLimit: 20

}

},

y: {

title: { display: true, text: '빈도' }

}

});

</script>

</body>

</html>

자존감이 낮은 편입니다. "다른 사람들에 비하면 나는 부족한 점이 많은 것 같아" 라고 생각하고 있나요? 항상 스스로를 낮추고 다른 사람들을 빛나게 해주는 당신. 다른 사람들에게는 칭찬도 잘하고 축하도 잘하면서 자신에게는 그러기가 쉽지 않죠. 이 세상 최고의 겸손왕인 당신은 스스로에게 가장 엄격해요. 자기자신에게 조금 더 관대해져 보면 어떨까요? 그리고 팀플이나 협업을 할 때 너무 양보만 하는 것은 좋지 않다는 사실도 꼭 기억해주세요. 이 험한 세상, 당신마저 당신편이 되지 않는다면 당신은 얼마나 외로울까요? 고정관념에서 한 발자국 떨어져 있는 그대로의 나를 바라보고 칭찬해주면 어떨까요? 우선 오늘은 당신의 겸손함부터 칭찬해봅시다. 식물을 키우듯 나를 사랑하는 마음을 정성을 다해 키워봅시다. 다른 사람을 배려하는 것도 좋지만 오늘부터 바로 내가 나를 멋지게 응원해 보자구요!

@@ Line 1: / Line 1: @@
-<iframe id="self-esteem-frame"
+<!DOCTYPE html>
-        src="https://test.magazine-d.com/self-esteem-test-korean-result/"
+<html lang="ko">
-        style="width:100%; height:500px; border:none; margin:0; padding:0;"></iframe>
+<head>
+  <meta charset="UTF-8" />
+  <title>자존감 점수 분포</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+  <canvas id="barChart" width="600" height="300"></canvas>
+  <script>
+    const urlParams = new URLSearchParams(window.location.search);
+    const highlightIndex = parseInt(urlParams.get('point') || -1);
+    const labels = [...Array(101).keys()]; // 0~100점
+    const dataValues = [
+,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
+,1,1,2,2,2,3,4,5,6,7,8,10,11,14,16,19,22,25,29,33,38,42,
+,53,59,66,72,79,86,93,100,106,113,120,126,131,136,141,145,
+,150,152,152,153,152,150,147,144,140,135,129,124,117,111,
+,97,90,83,77,70,64,57,51,46,41,36,32,28,24,21
+    ];
+    const percentileData = [
+.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,
+.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,
+.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,100.0,99.98,
+.96,99.94,99.92,99.88,99.84,99.80,99.74,99.66,99.56,99.44,
+.30,99.14,98.94,98.72,98.44,98.12,97.74,97.30,96.80,96.22,
+.56,94.80,93.96,93.00,91.94,90.76,89.44,88.00,86.42,84.70,
+.84,80.84,78.72,76.46,74.06,71.54,68.92,66.20,63.38,60.48,
+.52,54.53,51.49,48.45,45.39,42.35,39.35,36.41,33.53,30.73,
+.03,25.45,22.97,20.63,18.42,16.34,14.39,12.59,10.94,9.40,
+.00,6.72,5.58,4.56,3.64,2.82,2.10,1.46,0.90,0.42,0.0
+    ];
+    const backgroundColors = labels.map((_, i) =>
+      i === highlightIndex ? '#f9e16b' : '#ededed'
+    );
+    const ctx = document.getElementById('barChart').getContext('2d');
+    const chart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: [{
+          label: '자존감 점수별 빈도',
+          data: dataValues,
+          backgroundColor: backgroundColors,
+          borderWidth: 1,
+          borderColor: '#cccccc'
+        }]
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          title: {
+            display: true,
+            text: '자존감 점수 분포 (빈도 기반)'
+          },
+          legend: { display: false },
+          tooltip: {
+            callbacks: {
+              label: function(context) {
+                const idx = context.dataIndex;
+                const freq = dataValues[idx];
+                const pct = percentileData[idx].toFixed(2);
+                return `빈도: ${freq}, 상위 백분위: ${pct}%`;
+              }
+            }
+          }
+        },
+        onClick: (evt, elements) => {
+          if (elements.length > 0) {
+            const index = elements[0].index;
+            const score = labels[index] + '점';
+            const freq = dataValues[index];
+            const pct = percentileData[index].toFixed(2);
+            alert(`점수: ${score}\n빈도: ${freq}\n상위 백분위: ${pct}%`);
+          }
+        },
+        scales: {
+          x: {
+            title: { display: true, text: '자존감 점수 (0 ~ 100)' },
+            ticks: {
+              autoSkip: true,
+              maxTicksLimit: 20
+            }
+          },
+          y: {
+            title: { display: true, text: '빈도' }
+          }
+        }
+      }
+    });
+  </script>
+</body>
+</html>
 자존감이 낮은 편입니다. "다른 사람들에 비하면 나는 부족한 점이 많은 것 같아" 라고 생각하고 있나요? 항상 스스로를 낮추고 다른 사람들을 빛나게 해주는 당신. 다른 사람들에게는 칭찬도 잘하고 축하도 잘하면서 자신에게는 그러기가 쉽지 않죠. 이 세상 최고의 겸손왕인 당신은 스스로에게 가장 엄격해요. 자기자신에게 조금 더 관대해져 보면 어떨까요? 그리고 팀플이나 협업을 할 때 너무 양보만 하는 것은 좋지 않다는 사실도 꼭 기억해주세요. 이 험한 세상, 당신마저 당신편이 되지 않는다면 당신은 얼마나 외로울까요? 고정관념에서 한 발자국 떨어져 있는 그대로의 나를 바라보고 칭찬해주면 어떨까요? 우선 오늘은 당신의 겸손함부터 칭찬해봅시다. 식물을 키우듯 나를 사랑하는 마음을 정성을 다해 키워봅시다. 다른 사람을 배려하는 것도 좋지만 오늘부터 바로 내가 나를 멋지게 응원해 보자구요!