GPT-4 Degraded Performance Example

GPT-4 Giving a "bad" working example.md

This is an example of the degraded performance of GPT-4.

The original version does work and give the correct result but it isn't "Vue-like". It's doing direct DOM manipuliation. Using a framework like Vue if you find yourself needing to search the DOM for elements for set properties you are probably doing something wrong.

Below is an example of code that GPT-4 suggested.

While it is able to correct its answers after being prompted the original responses provided a bad foundation for the page.

Grades for my repsonses from a Vue3 instructor perspective would be

V1: Fail. V2: Fail. V3: Pass.

---

Working V1 Example

<template>
  <div id="scroll-container" ref="scrollContainer">
    <div class="scroll-text-forwards">{{ repeatingText }}</div>
    <div class="scroll-text-backwards">{{ repeatingText }}</div>
    <div class="scroll-text-forwards">{{ repeatingText }}</div>
    <div class="scroll-text-backwards">{{ repeatingText }}</div>
    <div class="scroll-text-forwards">{{ repeatingText }}</div>
    <div class="scroll-text-backwards">{{ repeatingText }}</div>
    <div class="scroll-text-forwards">{{ repeatingText }}</div>
    <div class="scroll-text-backwards">{{ repeatingText }}</div>
    <div class="scroll-text-forwards">{{ repeatingText }}</div>
    <div class="scroll-text-backwards">{{ repeatingText }}</div>
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      repeatingText:
        "FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER - ",
    };
  },
  mounted() {
    const container = this.$refs.scrollContainer;
    for (let i = 0; i < container.children.length; i++) {
      const child = container.children[i];
      const delay = Math.floor(Math.random() * 15000);
      child.style.setProperty('--random-delay', `-${delay}ms`);

      const textLength = child.offsetWidth;
      child.style.setProperty('--text-length', `${textLength}px`);

      // Reset opacity back to 1 when animation iteration is complete
      child.addEventListener('animationiteration', () => {
        child.style.opacity = 1;
      });
    }
}
};
</script>

<style scoped>
@font-face {
  font-family: 'ArtegraBoldItalic';
  src: url('assets/fonts/ArtegraSans-BoldItalic.woff2') format('woff2'),
       url('assets/fonts/ArtegraSans-BoldItalic.woff') format('woff'),
       url('assets/fonts/ArtegraSans-BoldItalic.ttf') format('truetype');
}

#scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  inline-size: 100%;
  overflow: hidden;
}

.scroll-text-forwards, .scroll-text-backwards {
  font-family: 'ArtegraBoldItalic', sans-serif;
  font-size: 5rem;
  white-space: nowrap;

  animation: 60s linear infinite;
  animation-delay: var(--random-delay);
}

.scroll-text-forwards {
  color: white;
  animation-name: my-animation;
}

.scroll-text-backwards {
  -webkit-text-stroke: 3px white;
  -webkit-text-fill-color: #00000000;
  animation-name: my-animation-reverse;
}

@keyframes my-animation {
    0% { 
      transform: translateX(0); 
      opacity: 0;
    }
    2% {
      opacity: 1;
    }
    98% {
      opacity: 1;
    }
    100% { 
      transform: translateX(calc(-1 * var(--text-length))); 
      opacity: 0;
    }
  }

  @keyframes my-animation-reverse {
    0% { 
      transform: translateX(calc(-1 * var(--text-length))); 
      opacity: 0;
    }
    2% {
      opacity: 1;
    }
    98% {
      opacity: 1;
    }
    100% { 
      transform: translateX(0); 
      opacity: 0;
    }
  }

</style>

V2 Example (After asking to make it to leaverage more view functionality

---

<template>
  <div id="scroll-container" ref="scrollContainer">
    <div v-for="n in 10" :key="n" :class="getClass(n)">
      {{ repeatingText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      repeatingText:
        "FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER - ",
      elements: [],
    };
  },
  mounted() {
    this.elements = Array.from(this.$refs.scrollContainer.children);
    this.elements.forEach((child, i) => {
      const delay = Math.floor(Math.random() * 15000);
      child.style.setProperty('--random-delay', `-${delay}ms`);

      const textLength = child.offsetWidth;
      child.style.setProperty('--text-length', `${textLength}px`);
    });
  },
  methods: {
    getClass(index) {
      return index % 2 === 0 ? 'scroll-text-backwards' : 'scroll-text-forwards';
    },
  },
};
</script>

<style scoped>
  /* Your CSS stays the same */
</style>

---

Final V3 Example which I would consider a pass

<template>
  <div id="scroll-container">
    <div 
      v-for="n in 10" 
      :key="n" 
      :class="getClass(n)"
      :style="{ '--random-delay': getRandomDelay(n) + 'ms', '--text-length': getTextLength + 'px' }"
    >
      {{ repeatingText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      repeatingText:
        "FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER _ FILTER - FILTER - ",
    };
  },
  computed: {
    getTextLength() {
      // Calculate the text length in any way that is appropriate for your use case
      // For demonstration, I am returning a fixed value.
      return 500;
    },
  },
  methods: {
    getClass(index) {
      return index % 2 === 0 ? 'scroll-text-backwards' : 'scroll-text-forwards';
    },
    getRandomDelay(index) {
      return Math.floor(Math.random() * 15000) * -1;  // Random delay in milliseconds
    },
  },
};
</script>

<style scoped>
  /* Your CSS stays the same */
</style>