device use frequency

Competencies Survey

Competencies Appendix

Did not assess basic OS competencies (folder/file management)

Study Findings

Study Overview

Total: 72/100

Original Content 30/30

Technical Understanding: 22/30: * Use of Required Tools (5/6) * Integration of Technology (3/5): The project integrates the classifier well with the video feed, allowing for interactive classification and step-by-step progression. * Functionality of Classifier Models (4/5): The classifier functions as intended, recognizing objects and triggering instructions. * Interactivity and Feedback (3/5): The project includes a linear progression through steps based on recognized labels. * Complexity of Decision Tree or Flowchart (3/4): The decision logic is linear and functional, guiding users through a series of prompts. * Creative Application of Rules (4/5): The narrative is reflective and personal, inviting users to engage with the campus environment in a thoughtful way. Instructions are imaginative and align with the psychogeographic goals.

Timely Submission 20/40

Total: 86/100

Original Content 30/30

Technical 26/30

• Use of Required Tools (5/6):
• Integrates an image classifier, a video feed, and interactive visuals such as directional arrows and prompts.
• Integration of Technology (4/5):
• The classifier works well with the video feed, providing label-based instructions and visual cues like images and arrows. However, there are minor issues with UI consistency, such as overlapping text, and the arrow animations feel underutilized.
• Functionality of Classifier Models (4/5):
• The classifier is functional and uses a confidence threshold effectively to ensure valid instructions are tied to high-confidence labels.
• Interactivity and Feedback (5/5):
• The project provides visual and text-based feedback, guiding the user through a dérive.
• Complexity of Decision Tree or Flowchart (3/4):
• The decision logic is linear but functional, guiding users through predefined steps based on detected labels, with some some branching instructions.
• Creative Application of Rules (5/5):
• The instructions are imaginative, encouraging users to explore and interact with their surroundings in a playful and reflective manner. The inclusion of directional arrows and location-based prompts adds a sense of movement and purpose.

Timely Submission 30/40 Submitted on time with issues

Total 85/100

Original Content 30/30

Technical 25/30

• Use of Required Tools (6/6):
• Effectively uses an image classifier, video input, and user interaction via buttons. The random instruction generator adds an engaging layer.
• Integration of Technology (3/5):
• The classifier works and displays results, but the confidence threshold is not consistently applied within conditional statements, which can lead to inaccurate instructions.
• Functionality of Classifier Models (3/5):
• The classifier recognizes labels, but the confidence threshold isn’t utilized effectively, making the results less reliable.
• Interactivity and Feedback (5/5):
• The project includes clear instructions and prompts tied to recognized objects, enhancing engagement.
• Complexity of Decision Tree or Flowchart (3/4):
• The decision logic is straightforward but functional, guiding users through a series of object-based prompts. Adding more branching paths or dynamic interactions could make the experience less linear and more exploratory.
• Creative Application of Rules (5/5):
• The project emphasizes reflection and engagement with campus art and surroundings, effectively tying in psychogeographic principles.

Timely Submission 30/40: Submitted on time with issues

Total 71/100

Original Content 30/30

Technical 21/30:

• Use of Required Tools (4/6): Uses ml5.js for image classification and integrates video input. Missing ml5.js script in the HTML file (added in to test) and mechanisms for interactivity are incomplete, such as transitioning from the start page (startPage always equals false/no timer or interaction implemented).
• Integration of Technology (3/5): The classifier and video feed are set up correctly, and the model is functional. However, the logic for transitioning between states (e.g., from the start page to the content) is missing, which halts the progression of the project.
• Functionality of Classifier Models (5/5): The classifier seems to work as intended, recognizing objects and labels.
• Interactivity and Feedback (3/5): The feedback includes playful and narrative-driven text tied to specific labels, which aligns well with the project goals.
• Complexity of Decision Tree or Flowchart (2/4): The decision logic is linear and lacks branching complexity.
• Creative Application of Rules (4/5): The narrative is imaginative and cohesive, involving a playful journey to find a notebook.

Timely Submission 20/40

Total: 79/100

Original Content 30/30

Technical 29/30:

• Use of Required Tools (6/6): Effectively uses the ml5.js image classifier, a video feed, and dynamic user interaction through button presses.
• Integration of Technology (5/5): Seamless integration of the classifier with the video feed.
• Functionality of Classifier Models (4/5): Effectively recognizes location-specific objects, driving the progression of the dérive.
• Interactivity and Feedback (5/5): The project provides clear and engaging feedback.
• Complexity of Decision Tree or Flowchart (4/4): The decision logic is complex and well-structured, with clear progression based on location-based labels. The branching instructions guide the user effectively through a structured yet exploratory dérive.
• Creative Application of Rules (5/5): The rules are highly creative and rooted in psychogeographic principles.

Timely Submission 20/40

Total 75/100

Original Content 30/30

Technical 24/30

• Use of Required Tools (6/6): Effectively uses the ml5.js image classifier and integrates video input
• Integration of Technology (4/5): The project smoothly transitions between game states based on classification results, demonstrating a strong understanding of conditional logic.
• Functionality of Classifier Models (4/5): The classifier successfully identifies objects and updates the game state accordingly.
• Interactivity and Feedback (3/5): The project provides text-based feedback that updates with each game state, guiding the player through objectives. Could benefit from more engaging elements, such as animations or additional sensory outputs like audio.
• Complexity of Decision Tree or Flowchart (3/4): The decision flow is linear and straightforward, guiding players from one objective to the next.
• Creative Application of Rules (5/5): The rules and objectives are imaginative and humorous.

Timely Submission 20/40

Total: 84/100

Original Content 30/30

Technical 24/30:

• Use of Required Tools (5/6): Effectively integrate classification tools, including a Teachable Machine model and video input.
• Integration of Technology (4/5): The classifier works well with video input, and the label-based conditional logic is clear.
• Functionality of Classifier Models (3/5): The classifier functions, but there is inconsistent object recognition during gameplay.
• Interactivity and Feedback (4/5): The interactive aspects, including shape identification and imaginative prompts, are engaging and align well with the concept of creativity and exploration.
• Complexity of Decision Tree or Flowchart (3/4): The logic flow is straightforward and engaging, but it is primarily linear, with limited branching or unexpected paths. Adding more complex conditions or varying outcomes would increase the depth of the project.
• Creative Application of Rules (5/5): The rules are unique and imaginative, encouraging users to explore and interact with their environment. The emphasis on imagination and creativity is well-executed and aligns strongly with the psychogeographic themes of the project.

Timely Submission 30/40: * Submitted on time with issues

Total: 75/100

Original Content 30/30

Technical Understanding 25/30: * Use of Required Tools (6/6) * The project effectively integrates tools such as the image classifier, video input, and audio playback. * Integration of Technology (4/5) * The use of classification, video display, and label-based progression is seamless and functional. * The classification results are used effectively to trigger specific actions and audio playback. However, there is no fallback logic if classification fails or if the environment lacks recognized objects. * Functionality of Classifier Models (3/5) * The classifier operates with sufficient functionality, identifying objects and triggering associated instructions. * The model is not retrained, as indicated in the code comments, which could reduce its accuracy in recognizing project-specific elements. * Interactivity and Feedback (4/5) * The user is guided through the experience with dynamic audio and text feedback based on classified labels. * Feedback is engaging and humorous but could be enhanced with more visual or interactive cues for the detected elements. * Complexity of Decision Tree or Flowchart (3/4) * The flow is linear but has some branching logic tied to specific labels. This creates a guided but somewhat limited exploration experience. * Increasing the number of paths or conditions could enrich the overall structure and align more closely with the dérive concept. * Creative Application of Rules (5/5) * The rules are really creative, with witty and engaging text prompts that enhance the psychogeographic aspect of the project.

Timely Submission 20/40

Total: 84/100 Nice work!

Original Content 30/30

Technical Feedback 24/30:

• Use of Required Tools (5/6)

• Effectively uses tools like the image classifier, video capture, and p5.js functions.

• Integration of Technology (4/5)

• Image classification and video feed flipping are well-executed, but the repeated flipping and removing of images could be optimized.

• Functionality of Classifier Models (4/5)

• Classifier works well with a clear confidence threshold and known labels.

• Handling of unknown labels could be improved for more graceful responses.

• Interactivity and Feedback (4/5)

• Provides dynamic instructions and animations based on detected labels.

• Interactivity could be enhanced with additional feedback, such as audio cues.

• Complexity of Decision Tree or Flowchart (3/4)

• Decision logic is clear, with a variety of instructions and animations.

• Expanding the branching interactions could improve the depth and richness of the experience.

• Creative Application of Rules (4/5)

• Rules are creative and well-aligned with psychogeographic concepts, offering engaging user actions.

On-Time Presentation 30/40: * Presented on time with some technical issues

Technical Feedback (8/20)

HTML Structure (3/5)

• ✓ Good heading variety (h1-h4)
• ✗ Structural issues:
• <h3> nested inside <h3>
• Invalid custom tags (<p1>, <p2>)
• ✓ Links properly embedded
• ⚠ Image implementation:
• Alt attributes present
• Some invalid URLs (\ddd)
• Inconsistent sources

CSS Implementation (4/10)

• ✗ Missing IDs completely
• ✗ No class usage
• ✗ Style issues:
• Invalid selectors (p1, p2)
• Redundant background declarations
• Overuse of inline styles
• ⚠ Limited styling scope:
• Basic font sizing
• Simple background images
• Needs more detailed styling

Code Quality (1/5)

• ✗ Organization problems:
• Excessive <br> tags
• Missing closing tags
• Poor indentation
• ✗ Invalid elements:
• Custom paragraph tags
• Broken image sources
• Improper tag nesting

Priority Fixes:

1. Fix HTML structure:
2. Replace <p1>, <p2> with <p>
3. Correct heading hierarchy
4. Add proper closing tags

5. Fix image URLs

6. Improve CSS:

7. Add 5+ unique IDs
8. Create reusable classes
9. Remove redundant styles

10. Replace inline styling

11. Clean up code:

12. Replace <br> with margins/padding
13. Improve indentation
14. Fix tag nesting

Your content structure shows promise, but needs technical cleanup. Focus first on using valid HTML elements and building a proper CSS structure with IDs and classes.

Technical Feedback (18/25)

Successfully Implemented (18 pts)

• ✓ Integer Variables (4/4)
• Good variable usage:
• circleX, circleY
• circleRadius
• angle
• ✓ for() Loop (3/3)
• Effective concentric circle generation
• ✓ Conditional Statements (3/3)
• Smart screen state management
• Good click detection
• ✓ Custom Functions (3/3)
• Well-structured screen functions:
• drawFirstScreen()
• drawSecondScreen()
• drawThirdScreen()
• ✓ Rotations/Translations (3/3)
• Good ellipse transformations
• Proper push()/pop() usage
• ✓ Mouse Interaction (2/2)
• Effective screen transitions
• Good click handling

Missing Requirements (7 pts)

• ✗ Variable Reset/Inversion (0/2)
• No conditional resets
• ✗ Array Implementation (0/3)
• No position tracking
• ✗ Object/Class Creation (0/4)
• No OOP structure

Priority Improvements:

1. Add position tracking:
2. Create arrays for circle positions
3. Store pattern coordinates

4. Track animation states

5. Implement variable control:

6. Add direction inversion
7. Create animation cycles

8. Reset positions conditionally

9. Convert to OOP:

10. Create Circle class
11. Create Screen class
12. Move drawing methods
13. Store properties

Your screen management and transformations are great. Converting screens or patterns to classes would make your code more maintainable.

Technical Feedback (22/25) - Excellent Work!

Successfully Implemented (22 pts)

• ✓ Integer Variables (4/4)
• Great variable usage:
• dropX, dropY
• xSpeed, ySpeed
• rot
• leafX, leafY
• ✓ for() Loop (3/3)
• Effective raindrop patterns
• Good cloud positioning
• ✓ Conditional Statements (3/3)
• Smart position resets
• Good boundary handling
• ✓ Array Implementation (3/3)
• Well-used position arrays:
• xLoc[]
• yLoc[]
• ✓ Custom Function (3/3)
• drawClouds() well implemented
• ✓ Rotations/Translations (3/3)
• Good leaf transformations
• Proper push()/pop() usage
• ✓ Mouse Interaction (2/2)
• Creative raindrop tinting
• ⚠ Variable Reset (1/2)
• Position resets present
• Missing true inversion

Missing Requirements (3 pts)

• ✗ Object/Class Creation (0/4)
• No OOP implementation

Suggestions for Perfect Score:

1. Convert to OOP:
2. Create Raindrop class
3. Create Leaf class
4. Move properties/methods

5. Store instances in arrays

6. Enhance variable control:

7. Add true direction inversion
8. Implement speed changes

Your sketch is very well-structured with excellent use of arrays, loops, and transformations. To make it perfect, consider converting your raindrops or leaves into classes. This would make your code more maintainable and potentially allow for more complex behaviors.

Technical Feedback (10/25)

Successfully Implemented (10 pts)

• ✓ Integer Variables (4/4)
• Strong rotation controls:
• rot
• secondRot
• thirdRot
• rotReverse
• ✓ Rotations/Translations (3/3)
• Multiple rotations well-implemented
• Good push()/pop() usage
• Clean ellipse positioning
• ✓ Mouse Interaction (2/2)
• Creative color control
• Good translation response
• ⚠ Variable Reset (1/2)
• Basic rotation decrement
• Missing conditional reset

Missing Requirements (15 pts)

• ✗ for() Loop (0/3)
• No iteration present
• ✗ Conditional Statements (0/3)
• No control logic
• ✗ Array Implementation (0/3)
• No element storage
• ✗ Custom Function (0/3)
• No function definitions
• ✗ Object/Class Creation (0/4)
• No OOP structure

Priority Improvements:

1. Add control logic:
2. Boundary conditions
3. Rotation limits

4. State changes

5. Create functions:

6. drawRotatingShape()
7. updateRotations()

8. handleMouseInteraction()

9. Implement storage:

10. Array for multiple shapes
11. Use for loop for creation

12. Track positions/rotations

13. Convert to OOP:

14. Create RotatingShape class
15. Move rotation properties
16. Add update methods

Your visual effects and transformations are strong, particularly the rotation system and mouse interaction. To enhance your sketch, focus on adding structure through functions and classes, and implement more dynamic control through conditionals and loops.

Technical Feedback (9/25)

Successfully Implemented (9 pts)

• ✓ Integer Variables (4/4)
• Strong variable implementation:
• x, y, xspeed, yspeed
• rectX, rectY
• squareX, squareY
• ✓ Conditional Statements (3/3)
• Effective bounce mechanics
• Good boundary detection
• ✓ Variable Reset/Inversion (2/2)
• Clean speed inversions
• Well-implemented boundary responses

Missing Requirements (16 pts)

• ✗ for() Loop (0/3)
• No iteration implemented
• ✗ Array Implementation (0/3)
• No position tracking
• ✗ Custom Function (0/3)
• No function definitions
• ✗ Object/Class Creation (0/4)
• No OOP structure
• ✗ Rotations/Translations (0/3)
• No transform operations
• ✗ Mouse Interaction (0/2)
• No mouseX/mouseY usage

Priority Improvements:

1. Convert to OOP:
2. Create Shape class
3. Move position/speed properties

4. Add movement methods

5. Add iteration:

6. Use for loop for multiple shapes

7. Store shapes in array

8. Create functions:

9. moveShape()
10. checkBoundaries()

11. drawShape()

12. Add visual interest:

13. Implement rotations
14. Add translations

15. Use push()/pop()

16. Make interactive:

17. Mouse position affects movement
18. Click spawns new shapes

Your movement and collision logic is well-implemented. To enhance your sketch, focus on organizing your code into classes and functions, and add more complex features through loops and arrays.

Technical Feedback (8/25)

Successfully Implemented (8 pts)

• ✓ Integer Variables (4/4)
• Good use of movement variables:
• x, y
• xSpeed, ySpeed
• ✓ Conditional Statements (3/3)
• Effective boundary checking:
• x boundary conditions
• y boundary conditions
• ⚠ Variable Reset (1/2)
• Basic reset implemented
• Missing true inversion

Missing Requirements (17 pts)

• ✗ for() Loop (0/3)
• No iteration present
• ✗ Array Implementation (0/3)
• No position storage
• ✗ Custom Function (0/3)
• No function definitions
• ✗ Object/Class Creation (0/4)
• No OOP structure
• ✗ Rotations/Translations (0/3)
• No transform operations
• ✗ Mouse Interaction (0/2)
• No mouseX/mouseY usage

Priority Improvements:

1. Add basic iteration:
2. Use for loop for multiple elements

3. Create repeating patterns

4. Implement storage:

5. Create position array

6. Track multiple elements

7. Organize code:

8. Create movement function
9. Make drawing function

10. Build simple class

11. Add visual interest:

12. Include rotations
13. Use translations

14. Implement push()/pop()

15. Make it interactive:

16. Add mouse control
17. Respond to position

Your movement and boundary logic is solid. To enhance your sketch, focus on adding more complex elements like loops and transformations. Consider converting your movement code into a class for better organization.

Technical Feedback (14/25)

Successfully Implemented (14 pts)

• ⚠ Integer Variables (3/4)
• Has variables:
  • floatingBall.x/y
  • floatingBall.speedX/Y
• Note: Movement logic inactive
• ✓ for() Loop (3/3)
• Good spectrum data iteration
• Effective circle/rectangle generation
• ✓ Custom Function (3/3)
• drawBackground(spectrum) well implemented
• ⚠ Array Usage (2/3)
• Spectrum data stored well
• Missing position control array
• ✓ Rotations/Translations (3/3)
• Good use in rectangle drawing
• Proper push()/pop() isolation

Missing Requirements (11 pts)

• ✗ Conditional Statements (0/3)
• No logic control
• ✗ Variable Reset/Inversion (0/2)
• No conditional resets
• ✗ Object/Class Creation (0/4)
• Floating ball not object-oriented
• ✗ Mouse Interaction (0/2)
• No mouseX/mouseY usage

Priority Improvements:

1. Activate ball movement:
2. Uncomment movement logic
3. Add boundary conditions

4. Implement position resets

5. Convert to OOP:

6. Create Ball class
7. Move properties to class

8. Add methods for movement

9. Add interactivity:

10. Mouse position affects visualization

11. Click events for effects

12. Enhance control:

13. Add boundary checking
14. Implement speed changes
15. Create position array

Your audio visualization is strong, particularly the spectrum analysis and transformations. Focus on adding interactivity and object-oriented structure to meet the project requirements.

Technical Feedback (2/25)

Successfully Implemented (2 pts)

• ✓ Mouse Interaction (2/2)
• Creative use of mouseX/mouseY
• Good color control implementation

Missing Requirements (23 pts)

• ✗ Integer Variables (0/4)
• r, g, b are mapped but not incrementing
• Need variables that change over time
• ✗ for() Loop (0/3)
• No iteration present
• ✗ Conditional Statements (0/3)
• No if/else logic
• ✗ Variable Reset/Inversion (0/2)
• No conditional resets
• ✗ Array Implementation (0/3)
• No position/element storage
• ✗ Custom Function (0/3)
• No function definitions
• ✗ Object/Class Creation (0/4)
• No OOP implementation
• ✗ Rotations/Translations (0/3)
• No transform operations

Priority Improvements:

1. Add incrementing variables:
2. Animation counters
3. Position changes

4. Speed variables

5. Implement basic animation:

6. Use for loop for repetition
7. Add conditionals for boundaries

8. Reset variables at limits

9. Add structure:

10. Create custom drawing function
11. Make a simple class (e.g., ColorController)

12. Store positions in array

13. Include transformations:

14. Add rotating elements
15. Translate shapes
16. Use push()/pop()

Your color interaction is good, but the sketch needs more technical elements that are outlined in the project brief. Start by adding basic animation with incrementing variables, then build up the complexity with loops and object-oriented features.

Technical Feedback (16/25)

Successfully Implemented (16 pts)

• ✓ Integer Variables (4/4)
• Good use of size variable
• Effective array position incrementing
• ✓ for() Loop (3/3)
• Well-implemented array iteration
• Clean rectangle drawing logic
• ✓ Conditional Statements (3/3)
• Smart expansion control
• Good position reset conditions
• ✓ Variable Reset/Inversion (2/2)
• Effective size reset
• Good position restoration
• ✓ Array Implementation (3/3)
• rectPositions well utilized
• ⚠ Rotations/Translations (1/3)
• Basic rotation implemented
• Needs more variety

Missing Requirements (9 pts)

• ✗ Custom Function (0/3)
• Could abstract rectangle drawing
• Or animation logic
• ✗ Object/Class Creation (0/4)
• No custom classes defined
• ✗ Mouse Interaction (0/2)
• No mouseX/mouseY usage

Priority Improvements:

1. Create custom functions:
2. drawRectangle()
3. updatePositions()
4. Implement a class:
5. class Rectangle
6. class AnimationController
7. Add more transformations:
8. Multiple rotation points
9. Scale variations
10. Include mouse interaction:
11. Control expansion rate
12. Influence rectangle positions

Your animation logic is strong, particularly with arrays and conditionals. To enhance the project, focus on abstracting functionality into classes and functions, and add more interactive elements.

Technical Feedback (25/25) - Excellent

Core Requirements (Fully Met)

• ✓ Integer Variables (4/4)
• Excellent implementation:
• num, rotation
• xSpeedSmall, ySpeedSmall
• spider.speed
• ✓ for() Loop (3/3)
• Well-implemented in createSmallSpiders()
• Effectively generates multiple spiders
• ✓ Conditional Statements (3/3)
• Smart border detection
• Good movement control logic
• ✓ Variable Reset/Inversion (2/2)
• Clean implementation in moveRandomly()
• Good directional changes
• ✓ Array Usage (3/3)
• smallSpiders array well utilized
• Good position management
• ✓ Custom Function (3/3)
• createSmallSpiders()
• display() method
• ✓ Object/Class Implementation (4/4)
• Spider class
• SmallSpider class
• ⚠ Rotations/Translations (3/3)
• Good push()/pop() usage
• Could add more variety
• ✓ Mouse Interaction (2/2)
• Creative color control with mouse position

Extra Credit Opportunities:

1. Add keyPressed():
2. Spider direction control
3. Speed adjustments
4. Implement mouseClicked():
5. Spawn new spiders
6. Change behaviors

Great job! You've hit almost every requirement perfectly. The only minor improvement would be adding more varied transformations. Consider adding the bonus features to make it even more interactive!

Technical Feedback (12/25)

Successfully Implemented (12 pts)

• ✓ Integer Variables (4/4)
• Good use of movement variables:
• rot, x, y
• xSpeed, ySpeed
• grassxMove, grassxSpeed
• ✓ Conditional Statements (3/3)
• Effective grass movement limits
• Good reset conditions
• ✓ Variable Reset/Inversion (2/2)
• Smart implementation with grassxSpeed
• ✓ Rotations/Translations (3/3)
• Well-implemented push()/pop()
• Good transform isolation

Missing Requirements (13 pts)

• ✗ for() Loop (0/3)
• ✗ Array Implementation (0/3)
• ✗ Custom Function (0/3)
• ✗ Object/Class Creation (0/4)
• ✗ Mouse Interaction (0/2)
• No mouseX/mouseY usage

Suggestions for Full Score:

1. Add a for loop:
2. Could use for grass repetition
3. Or bunny multiplication
4. Implement an array:
5. Store grass positions
6. Or bunny coordinates
7. Create a custom function:
8. drawBunny()
9. createGrass()
10. Add object-oriented elements:
11. class Bunny
12. class GrassBlade
13. Include mouse interaction:
14. Bunny follows cursor
15. Click-based movement

Your animation fundamentals are strong. The variable management and transformations show good understanding. Adding the missing technical elements would easily improve your grade.

Technical Feedback (8/20)

HTML Structure (2/5)

• ⚠ Heading issues:
• Good: Proper <h1>, <h2> usage
• ✗ Invalid: <h7>, <h8> tags (HTML only supports h1-h6)
• ⚠ Content structure:
• Limited use of <p> tags
• Text needs better organization
• ✗ Link problems:
• Incorrect src attribute in <a> tags
• Broken/incomplete image links
• ✗ Image issues:
• Invalid src values
• Incomplete object-fit styling

CSS Implementation (5/10)

• ⚠ ID usage:
• #Moving
• #Pizza
• #Mac and Cheese
• Inconsistent implementation
• ⚠ Class issues:
• .Driving
• .Chicago
• .Pakistan
• Limited reusability
• ✗ Style problems:
• Invalid r-gradient (should be linear-gradient)
• Incomplete properties (object-fit: ;)
• Excessive absolute positioning
• Redundant declarations

Code Quality (1/5)

• ✗ Organization issues:
• Inline <style> block
• Unclear style hierarchy
• ✗ Invalid HTML elements
• ✗ Syntax errors
• ✗ Inflexible layout

Priority Fixes:

1. Fix HTML structure:
2. Replace h7/h8 with valid heading tags
3. Add alt text to images
4. Fix image and link paths
5. Improve CSS:
6. Replace r-gradient with linear-gradient
7. Complete incomplete properties
8. Reduce absolute positioning
9. Enhance reusability:
10. Create shared classes
11. Group common styles
12. Move styles to external CSS file
13. Fix broken links and images

Your project shows potential but needs technical cleanup. Focus first on using valid HTML elements and fixing broken links. Then work on making your CSS more maintainable by reducing absolute positioning and creating reusable classes.

Technical Feedback (18/20)

HTML Structure (5/5)

• ✓ Excellent heading hierarchy (h1-h3)
• ✓ Well-organized paragraphs
• ✓ Links properly implemented:
• Correct <a> tag usage
• Good use of target="_blank"
• ✓ Images:
• Properly embedded
• Well-styled

CSS Implementation (9/10)

• ✓ Strong ID usage:
• #intro
• #ind
• #iow
• #pel
• ✓ Effective class reuse:
• .div1 across sections
• .div2 across sections
• ✓ Comprehensive tag styling:
• Headers
• Paragraphs
• Images
• ⚠ Minor optimization needed:
• Redundant properties in .div1 and .div2
• Could combine common styles

Code Quality (4/5)

• ✓ Clean, readable structure
• ✓ Proper indentation
• ✓ Good element nesting
• ✗ Missing </head> closing tag

Suggestions for Perfect Score:

1. Optimize CSS:
2. Create shared class for common div styles
3. Combine repeated properties
4. Add missing </head> tag

Excellent work overall! Your code is clean and well-structured. Making these minor improvements would make it perfect. Your use of classes and IDs is particularly strong, showing good understanding of CSS organization.

Technical Feedback (7/20)

HTML Structure (2/5)

• ✓ Main <h1> present
• ✗ Missing subheadings (<h2>, <h3>)
• ✗ HTML errors:
• Missing </p> closing tags
• Broken link syntax (<a"web"</a>)
• Orphaned <li> elements
• ✓ Images properly implemented with alt text
• ✗ List structure needs parent elements

CSS Implementation (4/10)

• ✓ ID implementation:
• #AncientForest
• #EldersRecess
• Others for layout
• ⚠ Class usage:
• .container used well
• Missing second reusable class
• ✗ Critical style errors:
• Invalid: background-color: #rgb(255, 255, 255)
• Incorrect: border-color: #red
• Excessive z-index values
• Overuse of absolute positioning

Code Quality (1/5)

• ✗ Major structural issues:
• Missing closing tags
• Broken link syntax
• Invalid CSS color values
• ✗ Layout problems:
• Excessive absolute positioning
• Unnecessary z-index stacking
• ✗ Redundant CSS declarations

Priority Fixes:

1. Fix HTML structure:
2. Close all paragraph tags
3. Correct link syntax
4. Add <ul> or <ol> for list items
5. Add subheadings for better hierarchy
6. Fix CSS syntax:
7. Remove # from RGB values
8. Correct color declarations
9. Improve layout approach:
10. Reduce absolute positioning
11. Simplify z-index usage
12. Add second reusable class
13. Clean up redundant styling

Your content and layout ideas are good, but the code needs significant cleanup. Focus on fixing the HTML structure first, then work on simplifying your CSS approach to avoid potential layout issues.

Technical Feedback (8/20)

HTML Structure (2/5)

• ✗ Critical structure issues:
• <div> inside <h1> (invalid)
• Multiple <body> tags
• Missing closing tags for <a> and <ol>
• ✗ Invalid <frame> usage (should be <iframe>)
• ⚠ Heading issues:
• Uses <h1> and <h3>
• Improper nesting
• ⚠ Custom paragraph ID used instead of <p> tag
• ✓ Images have alt attributes

CSS Implementation (5/10)

• ⚠ Problematic ID usage:
• #heading
• #heading2
• #p (should be tag selector)
• Split styles that should be unified
• ✗ Class issues:
• Invalid .container: syntax
• Missing second reusable class
• ✗ Style problems:
• Redundant h1/h3 styles
• Inline styles in <body>
• Misplaced colons
• Missing semicolons

Code Quality (1/5)

• ✗ Major structural issues:
• Multiple body tags
• Broken closing tags
• Improper element nesting
• ✗ Redundant styling
• ✗ Invalid HTML/CSS syntax
• ✗ Disorganized code structure

Critical Fixes:

1. Fix HTML structure:
2. Remove extra <body> tag
3. Fix tag nesting
4. Close all tags properly
5. Correct element usage:
6. Replace <frame> with <iframe>
7. Use proper <p> tags
8. Fix CSS:
9. Remove .container: syntax error
10. Consolidate heading styles
11. Move inline styles to CSS file
12. Clean up redundant code
13. Fix all closing tags

Hi Collin, I really enjoyed your projects concept; however, your project needs significant technical improvements to function properly. Focus first on fixing the HTML structure and closing tags, then work on organizing your CSS more efficiently.

Technical Feedback (8/20)

HTML Structure (3/5)

• ✓ Main <h1> implemented
• ✗ Missing subheadings (<h2>, <h3>) for sections
• ✓ Paragraphs structured correctly
• ✓ YouTube iframe well-embedded
• ✗ No supplementary hyperlinks
• ⚠ Image issues:
• Alt attributes present
• Duplicate image paths (/images/griptape-2.jpg)

CSS Implementation (4/10)

• ⚠ ID usage:
• #containerone
• #containertwo
• #containerthree
• Used inconsistently
• ⚠ Class implementation:
• .container used well
• Missing second reusable class
• ✗ Style issues:
• Missing semicolons
• Inline font-size:100px
• Inconsistent container positioning
• Redundant margin declarations

Code Quality (1/5)

• ✗ Organization issues:
• Duplicate image references
• Unnecessary inline styles
• Incomplete CSS properties
• ✗ Inefficient code:
• Redundant container positioning
• Unused style declarations
• ✗ Syntax problems
• Missing semicolons
• Improper property formatting

Priority Fixes:

1. Add section headers (<h2>, <h3>)
2. Fix duplicate image paths
3. Create second reusable class
4. Move inline styles to CSS
5. Clean up container positioning
6. Add relevant hyperlinks
7. Fix CSS syntax (semicolons, formatting)

Technical Feedback (11/20)

HTML Structure (4/5)

• ✓ Clear use of <h1> tags
• ✗ Missing <h2> and <h3> for better hierarchy
• ⚠ Inconsistent paragraph capitalization (#Content P)
• ✓ YouTube iframe well-implemented
• ✓ Images properly formatted with alt text

CSS Implementation (5/10)

• ✗ No IDs used (need at least 5)
• ⚠ Class usage:
• .container used well
• Missing second reusable class
• ✗ Style issues:
• Invalid syntax: margin-left:100x
• Misplaced attributes outside CSS blocks
• Redundant text-align:center declarations
• ⚠ Font declarations improperly placed in h1 block

Code Quality (2/5)

• ✗ CSS organization needs work:
• Attributes outside proper blocks
• Invalid margin values
• Inconsistent spacing
• ⚠ Inline styles should move to CSS
• ✗ Redundant style declarations

Priority Fixes:

1. Add 5 unique IDs for styling
2. Create second reusable class
3. Fix CSS syntax:
4. margin-left:100x → margin-left:100px
5. Move misplaced attributes into proper blocks
6. Add heading hierarchy (<h2>, <h3>)

Your layout and functionality work well. Focus on meeting the technical requirements (IDs and classes) and cleaning up CSS organization to improve your score significantly.

Technical Feedback (15/20)

HTML Structure (4/5)

• ✓ Good heading structure (h1, h2, h3)
• ✓ Proper paragraph implementation
• ✓ YouTube iframe well-embedded
• ✓ Images correctly used
• ✗ Syntax issues:
• Missing quotes in class attributes
• Extra quotes in style attributes
• Inline styles need moving to CSS

CSS Implementation (8/10)

• ✓ Strong ID usage:
• #firstImpression
• #entertainment
• #dependency
• #delusion
• #acceptance
• ✓ Class reuse:
• .section
• .styleOne
• ✗ Style issues:
• Invalid background-color: #black
• Incorrect properties (size: 50px)
• Unnecessary declarations (#wakeUp, #Lain, #crystal)

Code Quality (3/5)

• ✓ Decent overall organization
• ✗ HTML syntax inconsistencies
• ✗ Invalid CSS properties
• ✗ Unnecessary inline styling

Priority Fixes:

1. Fix attribute syntax:
2. class=styleOne → class="styleOne"
3. Clean up CSS:
4. background-color: #black → background-color: black
5. Remove invalid size property
6. Move inline styles to CSS file
7. Remove unnecessary ID styles
8. Clean up extra quotes in style attributes

Your structure is good and IDs/classes are well-implemented. Focus on cleaning up syntax and moving styles to your CSS file to make your code more easily updatable.

Technical Feedback (19/20)

HTML Structure (5/5)

• ✓ Excellent heading hierarchy (h1-h5)
• ✓ Proper paragraph structure
• ✓ Media well-implemented (YouTube, Giphy iframes)
• ✓ Images correctly formatted
• ⚠ Minor note: Redundant <a> tag after Giphy embed

CSS Implementation (10/10)

• ✓ Strong ID usage:
• #containerOne
• #leftnote
• #rightnote
• #color
• #define
• #bold
• #big
• ✓ Effective class reuse:
• .notes
• .small
• ✓ Comprehensive tag styling:
• Tables (table, th, td)
• Headings
• Paragraphs

Code Quality (4/5)

• ✓ Clean, readable structure
• ✓ Good separation of concerns
• ✓ Proper indentation
• ⚠ Some inline styles could move to CSS file

Suggestions for Perfect Score:

1. Remove redundant <a> tag after Giphy
2. Move inline styles to CSS file
3. Review table styling for consistency

Outstanding work on HTML structure and CSS implementation. Your code is clean, semantic, and well-organized. Minor tweaks to styling organization, but overall nice job.

Technical Feedback (8/20)

HTML Structure (3/5)

• ✓ Main heading (<h1>) used correctly
• ✗ Custom tags used instead of standard <p> tags (<p1>, <p2>, <p4>)
• ⚠ Links present but have syntax errors (missing >)
• ✓ Image (elio2.jpeg) implemented correctly
• ✗ Needs more section headings

CSS Implementation (4/10)

• ⚠ IDs implemented:
• #containerone
• #containertwo
• #floatingpup
• Need 2 more to meet requirements
• ⚠ Classes:
• .container used well
• Need another reusable class (3+ instances)
• ✗ Style issues:
• Invalid syntax (opacity: .7.5)
• Missing semicolons
• Broken custom tag selectors

Code Quality (1/5)

• ✗ Invalid HTML elements (<div1>, <p1>, <p2>, <p4>)
• ✗ Improper CSS formatting
• ✗ Missing closing brackets
• ✗ Invalid font-family declarations
• ✗ Misused quotes in div1 styling

Priority Fixes:

1. Replace custom tags (<p1>, <p2>, <p4>) with standard <p> tags
2. Add 2 more unique IDs
3. Create another reusable class
4. Fix link syntax
5. Clean up CSS syntax (semicolons, opacity values)

Enjoyed this project overall! Address the technical issues listed here and this will be a solid submission.

Technical Feedback (14/20)

HTML Structure (4/5)

• ✓ Good use of heading hierarchy (h1-h6)
• ✓ Paragraphs properly tagged
• ✗ Two empty <p> tags need content
• ✗ Missing navigation links
• ⚠ Images work but need better organization

CSS Implementation (7/10)

• ✓ Multiple IDs used effectively
• ✓ Good reuse of .container class
• ✗ #rain1 ID exists in CSS but not in HTML
• ✗ .container class missing style definitions
• ✗ Layout issues due to undefined container styles

Code Quality (3/5)

• ✗ HTML syntax errors:
• Missing > in <link> tag
• Unclosed final <div>
• ✗ Unused CSS selectors (p2, h2, #rain1)
• ✗ Inconsistent margin spacing
• ✗ Div structure needs optimization

Key Improvements:

1. Add navigation links
2. Define .container styles
3. Fix HTML syntax errors
4. Clean up unused CSS
5. Improve div organization

Overall I really enjoyed your concept and visuals that reinforced the theme of the page. Focus on cleaning up the technical details and completing the missing style definitions to take this to the next level.

Explore this idea in the context of the essay. In one-way networked communication - as in someone posting an image/video on social media as the "artwork" - we are indeed isolated and distanced from other humans and nature. Telematic Art on the other hand could be used to connect us to other people by creating networked collaborative artworks that connect us to other people and to nature. It may be helpful to explore this distinction.

I'd like to see more specifically what you mean here - as technology has always been created and used to increase the efficiency of human labor, whether physical or intellectual. Why would it be necessarily bad that people do less?

Absolutely - ready access to information can encourage us to see this information as inherently true simply because it is available to us in real time. For some, it can dampen their ability to think critically about a topic, instead expecting an answer to always be available.

Yes, this is a great example of a digital technology that has completely changed the way we move through and relate to space. GPS and digital maps are a virtual layer, influenced by other people (traffic tracking and rerouting based on traffic), that we use as an extension of ourselves and has dramatically changed our conception of the way the world is laid out.

So, I somewhat agree, but this is a value judgement (opinion) where you are positioning interactions made with digital technology above those in the physical world by making the virtual/physical (reality) distinction. Others may see digital technology as an extension of the physical world (as Ascott did), and find no real/unreal or real/virtual distinction at all. Support your opinion and this positioning.

Clarify and enumerate how these assumptions have come true and what transcendence or evolution mean in the context of Telematic Culture. Without seeing more specifically what you mean, I could counter that many of the technologies Ascott referenced at the time of writing have really only modestly evolved to faster or somewhat higher bandwidth versions of what came before.

Seems like an unresolved sentence here. What technology/technologies specifically are granting this freedom? How do they differ from the technologies they augment or extend (the technologies they are built upon)?

Please use spelling and grammar checks on future writing assignments. Many spelling and grammar errors are distracting and making your reasoning difficult to follow.

Somewhat - I might disagree that there has been more coherence, as the increase in data has also increased the noise-to-information ratio. Instead of focusing on the quantitative predictions like this one, look to the effect networked communication and Telematic systems has had on us psychologically/culturally and what new artforms these systems have facilitated.

Share more of your critical insights and reflections and try to use quotes strategically to reinforce your own reasoning, instead of in place of it. I know what Ascott says - but how do your experiences connect to his essay and what insights, agreements, or disagreements do you have with his text?

This statement does not really articulate advantages, disadvantages, or uncertainties - just more of a matter of fact, as any Telematic Art could only exist in the context of anything that came before it (and either expand or challenge the hegemony of what came before it). This question is an opportunity to reflect and think critically about a hyper-connected society - would like to see your reflection and insight here instead.

I'm with you up until this sentence - as graphic design has existed as a profession for over 100 years and informally for all of human history. Digital Media has existed in some form since the 1950s/60s, and is a vague term as it encompasses static images to video games. Consider what Ascott is specifically talking about in the new forms of interactive artworks that could be created using Telematic systems - what kinds of new artforms can the network between the artist and the viewer/participant enable beyond conventional artworks like paintings/images (even digital images or video), sculpture, etc?

I agree.

Vague assertion - how so?

Absolutely. Ascott saw this as a potential pitfall of networked communication - but how does Telematic Art avoid this shortcoming? What is made possible by networked communication between the artist and the viewer/participant that would not previously be possible? What kind of collaborations and what sort of interactive artworks could be created between people with Telematic systems? How does this differ from more conventional artworks (painting, sculpture, film, etc) where the interaction goes in one direction from the artist to the viewer?

Expand on this - what specifically would be made easier in our daily lives? How would these things being made easier affect our lives and change our relationship to these things?

How specifically will new methods of communication change the way we interact?

Please use spelling and grammar checks for future writing assignments. Spelling and grammar mistakes are distracting to the reader and make it more difficult to follow your line of reasoning.

I'm not sure what you meant here. Maybe rephrase and clarify what a useful tool for an artist is in contrast to the original purpose of a specific technology. Unsure how the level of complexity is relevant to whether a tool is useful for an artist or not - expand on this idea.

Much of this was a restatement of the essay - I would have liked to see more personal reflection and insight on how our current experiences with Telematic systems have reflected Ascott's predictions.

As in, we are able to have experiences outside of our body because of Telematic systems (e.g. controlling a robot arm from across the world using the internet, watching a first-person view of someone else online, etc)? In which case, experiments such as these have been occurring since the mid-to-late 20th century as Ascott explains with a review of his own artworks.

You've merely listed the technologies that Ascott enumerates in his essay that all existed at the time of his writing (some of which still exist in various forms) - but what impact have these technologies made culturally that he predicted?

Precision of language could clarify this point. Do you mean the dawn of telecommunications technology and networked communication? Technology is any tool or implement a human creates to augment their environment - from a stone axe to an iPhone.

Expand on this. Which of these are different and how? How specifically does Telematic Culture and Telematic Art change or augment a non-Telematic culture? Think beyond merely sharing information more easily, as structures for sharing information have always existed. How do artist and viewer/participant approach an artwork differently and what is created in their collaboration that was not possible pre-Telematic culture?

These things are made possible or enhanced by networked communication, but they may not necessarily be Telematic Art in the way Ascott envisions. From our conversation, Telematic Art describes a structure of art that creates something new from the collaboration made possible by the artwork, between the artist and the viewer/participant. Creating an artwork with photoshop is a digital artwork, but it is creating a conventional, one-directional artwork (from artist to viewer/receiver) and not an artwork that changes or is expanded by the use of the network.

Yes, another way to say this is that "the medium is the message". Or, the content of a medium is another medium - the way a medium presents content affects how we interpret that content. This was coined by Marshall McLuhan (https://en.wikipedia.org/wiki/Understanding_Media)

Please use spelling and grammar checks on future writing. These errors can make it difficult to follow your line of reasoning.

Interesting observation - that as connection grows, the information generated by this connection grows as well, but it becomes increasingly more difficult to verify if this information is accurate or harmful.

Definitely, instant access to the world's publicly available data can certainly stymie the ability to think critically. On the other side of this, could we use the capabilities of Telematic Art, this instant connection, to create artworks where individuals work together to think critically and act creatively on a problem? Instant networked access to information (e.g. an internet search) describes a one-way relationship, whereas Telematic Art describes how networked communication can form a relationship between two or more people to create something new.

This is in fact, a huge area of research and study for archivists and historians. One attempt has been carried about by the Internet Archive (web.archive.org), which is an attempt to archive the entire internet (although significant pieces are missing because of walled in platforms like TikTok or Instagram).

Excellent example - memes provide a base image or structure that can be expanded upon in a collaboration between the originator and the person using this structure to generate a meme.

A little vague. Would like to see clearer examples for the arguments you begin to form, and an exploration of Telematic Art as describing more than just communication between people, but the work created in that communication - the collaboration.

Be more specific. In addition to boundaries being changed as you describe, how does global networked communication change our relationship to one another or our world specifically?

Such as? And what distinguishes these new forms from conventional artworks (e.g. painting, sculpture, film)? Is it their formal quality (digital vs physical) or is it how they shape and change communication between people and the artworks made from this communication?

Definitely true, but are you using this as an example of Telematic Art or networked communication? Telematic Art brings people together (artist and viewer/participant) but they do more than view/watch/listen to content when they come together - the interaction fostered by the art allows something new to be created between those that have been brought together.

Please use spell and grammar check in the future. Many spelling and grammar errors make it difficult to follow your line of reasoning.

Interesting point - that perhaps there are physical social cues and interactions missed collaborating virtually. I could see this also as an opportunity to experiment with novel ways to communicate emotions (and unseen social cues, body language, etc) as part of the art making process, or in the artwork itself.

Conventional art already fosters communication between individuals who may have a multitude of socio-cultural differences. The term Telematic Art describes more than communication between individuals; it describes what those individuals can create in that communication, their collaboration, using networked tools.

A missing piece of this is that the collaboration is between the artist and the viewer, who becomes a participant in the artwork. The notion of a sole artist and a discrete work fades away in Telematic Art.

This is partly true but needs to be expanded. Telematics, or the collection of devices and networks used to communicate across distances, is not exclusive to the internet. Also, what are these possibilities - how is the internet (or another network) expanding the range of possibilities of art?

Definitely, that shared ownership can build empathy between all collaborators!

Interesting point - how can we articulate why it's more or less important that art is representative of truth? Having anchors for truth in non-art contexts (news, non-fiction writing, scientific papers, etc) for readers/viewers allows that content to be verified or expanded (as you say). In art, without this shared context of truth, when multiple parties collaborate, do new truths arise that can only exist in an art context?

To the viewers of a social media post/comment, is there a social connection that is as valuable or visceral as one we experience in physical space, or unmediated by the format of the social media post?

True, but there is a hierarchy of content - the original post the creator has made, and then the actions taken by the viewer to share or comment on that work. I'm not sure if social media is representative of the kind of collaboration Ascott imagined, as the viewer can do little to affect or change the output of the social media post. They can only comment and maybe affect future output (influencing the original creator). But it's not a direct collaboration where the output is the product of both the creator and the viewer/participant - it's more of a traditional sharing of static media (image/video) and the social response to that media.