{"id":395,"date":"2019-06-20T20:59:56","date_gmt":"2019-06-21T01:59:56","guid":{"rendered":"https:\/\/cassienooyen.com\/techbar\/?p=395"},"modified":"2019-06-20T21:04:02","modified_gmt":"2019-06-21T02:04:02","slug":"evolution-of-fsl-over-the-year","status":"publish","type":"post","link":"https:\/\/cassienooyen.com\/techbar\/evolution-of-fsl-over-the-year\/","title":{"rendered":"Evolution of FSL Over the Year"},"content":{"rendered":"\n<p>Attending the 2019 Domains Conference by Reclaim Hosting on June 10<sup>th<\/sup> and 11<sup>th<\/sup> has made me realize how much progress has been made on Full Spectrum Learning (FSL). When Ruthie and I first started on the FSL team, many things were different or didn\u2019t exist. The main changes include the grid, the website, and the interactive grid videos.<\/p>\n\n\n\n<h3><strong>The Full Spectrum Learning Grid<\/strong><\/h3>\n\n\n\n<p>In the beginning of last year, the grid featured a green axis and a gold axis and had language more focused to the faculty and those in education. Ruthie and I simplified the language and got to work on trying to recreate the old grid. We also added axis and intersection names to make it easier to focus on certain intersections.<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-2\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" width=\"1024\" height=\"729\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/grid-1024x729.png\" alt=\"\" data-id=\"401\" data-link=\"https:\/\/cassienooyen.com\/techbar\/?attachment_id=401\" class=\"wp-image-401\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/grid-1024x729.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/grid-300x214.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/grid-768x547.png 768w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/grid.png 1792w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Original FSL Grid<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" width=\"1024\" height=\"780\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames_black-1024x780.png\" alt=\"\" data-id=\"400\" data-link=\"https:\/\/cassienooyen.com\/techbar\/?attachment_id=400\" class=\"wp-image-400\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames_black-1024x780.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames_black-300x229.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames_black-768x585.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>My Version with Intersection Names<\/figcaption><\/figure><\/li><\/ul>\n\n\n\n<p>Thanks to a conversation with Autumm back in the beginning of November, we started to develop the color gird. Originally, the color grid only focused on color on the axis, but we eventually added in the intersection colors. However, there was separation between each intersection and it led to an optical illusion of phantom dots in between intersections.<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-2 is-cropped\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" width=\"1024\" height=\"780\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames_color-1024x780.png\" alt=\"\" data-id=\"405\" data-link=\"https:\/\/cassienooyen.com\/techbar\/?attachment_id=405\" class=\"wp-image-405\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames_color-1024x780.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames_color-300x229.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames_color-768x585.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" width=\"1024\" height=\"780\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames-1024x780.png\" alt=\"\" data-id=\"402\" data-link=\"https:\/\/cassienooyen.com\/techbar\/?attachment_id=402\" class=\"wp-image-402\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames-1024x780.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames-300x229.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_grid_simple_intnames-768x585.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul>\n\n\n\n<p>I had created a square block grid only for the intention of gaining the hexadecimal codes for the intersection color, but we decided that with a little bit of work, that would look the best for the framework. The colors made it look the cleanest and it showed the gradient of colors across the grid from light to dark. I felt like this made the idea of Full Spectrum Learning and the grid the easiest to understand and visually show the idea of the intersection of different types of engagement and technology.<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" width=\"1024\" height=\"1024\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/color_grid-1024x1024.png\" alt=\"\" data-id=\"403\" data-link=\"https:\/\/cassienooyen.com\/techbar\/?attachment_id=403\" class=\"wp-image-403\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/color_grid-1024x1024.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/color_grid-150x150.png 150w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/color_grid-300x300.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/color_grid-768x768.png 768w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/color_grid.png 1800w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul>\n\n\n\n<p>Today, that expanded grid is the basis and framework for Full Spectrum Learning.<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-1 is-cropped\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" width=\"1024\" height=\"666\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/color_grid_detail_rectangle-1024x666.png\" alt=\"\" data-id=\"406\" data-link=\"https:\/\/cassienooyen.com\/techbar\/?attachment_id=406\" class=\"wp-image-406\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/color_grid_detail_rectangle-1024x666.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/color_grid_detail_rectangle-300x195.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/color_grid_detail_rectangle-768x499.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul>\n\n\n\n<h3><strong>The Website<\/strong><\/h3>\n\n\n\n<p>One of the main reasons I was hired for the FSL position was to help create a new website. This website, like many others I have made, has multiple variations. The original website I created first semester can be found <a href=\"http:\/\/fsl.crnooyen.knight.domains\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"500\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_old-1024x500.png\" alt=\"\" class=\"wp-image-387\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_old-1024x500.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_old-300x147.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_old-768x375.png 768w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_old.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Original FSL Site<\/figcaption><\/figure>\n\n\n\n<p>During J-Term, Ruthie messaged me about a plug-in called Elementor. After watching a 2 hour YouTube video and spending countless hours playing around, the new FSL website was born. This website is constantly changing and I have a subdomain off of my domain where I can play around with different changes and additions. The current website can be found <a href=\"http:\/\/fullspectrumlearning.knight.domains\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"500\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_new-1024x500.png\" alt=\"\" class=\"wp-image-382\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_new-1024x500.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_new-300x147.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_new-768x375.png 768w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/fsl_new.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Current FSL Site<\/figcaption><\/figure>\n\n\n\n<h3><strong>The Interactive Grid<\/strong><\/h3>\n\n\n\n<p>The main addition to FSL this past year was the creation and introduction of the Interactive Grid on the Website.<\/p>\n\n\n\n<p>Trying to create a responsive table that is six columns by six rows turned out to be more challenging than I was expecting. After many different plug-ins fighting with not liking Elementor, with Ben\u2019s help we decided to go for an HTML coded table. A major benefit of this was the ability to easily add CSS with responsive div tags. To make sure this worked, I had to transfer back and forth from many different tabs and also pulled in Dreamweaver to solve some of the problems I was having. I have learned through this how frustrating coding can be and how easy it is for everything not to work just because your minimum and maximum parameters are in the wrong order (that one took me a bit too long to figure out\u2026).<\/p>\n\n\n\n<ul class=\"wp-block-gallery columns-2 is-cropped\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" width=\"1024\" height=\"455\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/week-9-1-1024x455.png\" alt=\"\" data-id=\"397\" data-link=\"https:\/\/cassienooyen.com\/techbar\/?attachment_id=397\" class=\"wp-image-397\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/week-9-1-1024x455.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/week-9-1-300x133.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/week-9-1-768x341.png 768w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/week-9-1.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Original Idea for the Interactive Grid<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" width=\"1024\" height=\"455\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/week-31-1-1024x455.png\" alt=\"\" data-id=\"398\" data-link=\"https:\/\/cassienooyen.com\/techbar\/?attachment_id=398\" class=\"wp-image-398\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/week-31-1-1024x455.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/week-31-1-300x133.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/week-31-1-768x341.png 768w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/week-31-1.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Interactive Grid with HTML and Color<\/figcaption><\/figure><\/li><\/ul>\n\n\n\n<p>After the Interactive Grid was created, we had to figure out how to create videos that would be stored there.<\/p>\n\n\n\n<p>Each video has gone through multiple changes and iterations to become what it is today. Below is the very first video we made featuring Dr. Riggle\u2019s Educational Psychology class and its evolution from November to the current version. Many things on the video have changed including the music, the intro video and the addition of explaining what the axes mean.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"jetpack-video-wrapper\"><iframe loading=\"lazy\" title=\"Original FSL Video 11\/30\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/FbTELn4cPPQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"jetpack-video-wrapper\"><iframe loading=\"lazy\" title=\"Student-Centered Hybrid Course\" width=\"810\" height=\"456\" src=\"https:\/\/www.youtube.com\/embed\/rgOqS7F9hbo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p>The newest additions to the page are the new thumbnail videos! We wanted to create a uniform look to the page and all of the videos, so I decided to add the intersection color to the thumbnail to increase the readability and aesthetic appeal of both the interactive grid and the YouTube channel.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"1024\" height=\"485\" src=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/interactive_grid_thumbnail-1024x485.png\" alt=\"\" class=\"wp-image-399\" srcset=\"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/interactive_grid_thumbnail-1024x485.png 1024w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/interactive_grid_thumbnail-300x142.png 300w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/interactive_grid_thumbnail-768x364.png 768w, https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/interactive_grid_thumbnail.png 1895w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3><strong>Looking Forward<\/strong><\/h3>\n\n\n\n<p>Research Fellowships are two year programs, and I am excited for what next year will hold. I can\u2019t even imagine how much we will accomplish next year, especially after looking back on how much we have grown over this year.<\/p>\n\n\n\n<p>Some exciting projects we are working on include course pages featuring a more in-depth explanation of the course, and the syllabus. We would also like to feature the full interviews with both the professor and the student about the class. We also want to continue filling up the interactive grid with more videos, eventually hoping to find a class to fill every intersection.<\/p>\n\n\n\n<p>A twist that we want to add is also seeing how the student perspective would change the grid. Explaining to the students what Full Spectrum Learning is and understanding the student\u2019s perspective of how it lands on the grid can be a valuable addition. We are also looking to add a blog to the site with reactions from professors and students about their classes and different pedagogies.<\/p>\n\n\n\n<p>The main goal for next year is to start promoting this initiative. We need to start explaining to the campus what Full Spectrum Learning is and why it is important for the campus community. The whole team has worked very hard to get FSL where it is today, and that work should be shown and celebrated by others as well.<\/p>\n\n\n\n<p>It is incredible to look back and see how much the whole team has accomplished this past year. It is weird for me to think about the fact that I applied for a different position and was offered this one; today, I couldn\u2019t imagine not being a part of this team. Most importantly, out of this experience I learned how to work better in a team and not feel like I have to control everything. I could not have asked for a better partner than Ruthie and I am so blessed that we were paired together. I\u2019ve gained a forever friend and the best coworker ever.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Attending the 2019 Domains Conference by Reclaim Hosting on June 10th and 11th has made me realize how much progress has been made on Full Spectrum Learning (FSL). When Ruthie and I first started on the FSL team, many things were different or didn\u2019t exist. The main changes include the grid, the website, and the interactive grid videos. The Full Spectrum Learning Grid In the beginning of last year, the grid featured a green axis and a gold axis and had language more focused to&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/cassienooyen.com\/techbar\/evolution-of-fsl-over-the-year\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;Evolution of FSL Over the Year&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[4],"tags":[],"jetpack_featured_media_url":"https:\/\/cassienooyen.com\/techbar\/wp-content\/uploads\/2019\/06\/evolution-of-fsl-1.png","_links":{"self":[{"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/posts\/395"}],"collection":[{"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/comments?post=395"}],"version-history":[{"count":4,"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/posts\/395\/revisions"}],"predecessor-version":[{"id":408,"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/posts\/395\/revisions\/408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/media\/409"}],"wp:attachment":[{"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/media?parent=395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/categories?post=395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cassienooyen.com\/techbar\/wp-json\/wp\/v2\/tags?post=395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}