123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!--
This is a great resource to have open while using this tutorial: https://www.webcomponents.org/author/LRNWebComponents

Welcome to the LRN Web Components factory! This is a great place to learn about what we are looking to achieve via LRN as well as design elements. The goal of using this is to get a better understanding for what Web Components are so that you can more effectively communicate requirements for projects.

It's also to get your feedback and input because we want LRN to be representative of the needs of education, teaching, learning, pedagogy and the people represented in those spaces.
-->
<h1>Group Activity - Discussion</h1>
  <p>Form a group of 4 to 6 people and discuss the following questions. Write / type answers / ideas / words for each so we can discuss as a larger group.</p>
  <ol>
<li>What issues make you the most crazy with regards to presenting materials to students online? (Regardless of platform utilized to do so)</li>
    <li>If the web was pedagogically focused, what's the biggest problem it would solve in your mind?</li>
<li>What problems could you forsee it creating?</li>
<li>When you produce material for students online, what are some instructional concepts, words, and ideas that you commonly represent via HTML?</li>
</ol>
<h2>Group Exercise - Element white boarding</h2>
<p>Let's envision what a new element could be</p>
<ol>
<li>Take 5-10 minutes to find some interactive or designed material from an online course environment (Canvas, Evolution, elmsln, drupal, etc).</li>
<li>What is the element trying to achieve?</li>
<li>If you could write a single tag and it do... that, what would it be called?</li>
<li>What fields / properties could make it flexible (example: a title property would allow you to change the title of the item created)?</li>
 <li>How else could this be repurposed for other applications?</li>
</ol>
<div class="example-container">
  <p>let's get started with an example. Let's say you wanted to make a paragraph of text. So you did.</p>
  <p class="the-paragraph-class">HTML elements are simple tags which express a concept either visually or semantically for the browser to process and display.</p>
  <!-- now let's make a link -->
  <p>I want you to read this story from wikipedia, so I'd make a <a href="https://en.wikipedia.org/wiki/The_New_Colossus">Link to wikipedia</a></p>
  <p>or if I wanted to embed the wikipedia article here instead, I'd probably copy and paste stuff from wikipedia.. OR, I could write the following</p>
  <div class="limit-size">
    <h3>What is instructional Design?</h3>
    <wikipedia-query search="Instructional_design"></wikipedia-query>
  </div>
  <p>Woah.... that was pretty cool... Ok, but what if it was just supplamental material? Well, in LRN, we call this an aside. An aside, pedagogically, is material that is supplamental to the primary learning content. We do this all the time under different names like "Call out blocks" or "Did you know" or "Remember:" types of content. This content then usually has visual cues for sighted users to suggest "ALERT: PAY ATTENTION LEARNER I NEED YOU TO SEE THIS!!!". For screen readers, this might be in meta data, or semantics.</p>
  <h2>Let's make an lrn-aside tag</h2>
  <!-- you can learn more about the lrn-aside tag here https://www.webcomponents.org/element/LRNWebComponents/lrn-aside -->
  <lrn-aside title="Did you know?" display="panelcard">
    <p>
    Did you know that you can make your own eco friendly ink and ink pens from materials you can find in nature? Follow this link to find out how.   <a href="www.nickneddo.com">www.nickneddo.com</a>
    </p>
  </lrn-aside>
  <p>Pretty cool right? So let's do that wikipedia example again, but this time let's make it an aside. Just like normal HTML, lrn / custom HTML elements can be stacked together!</p>
  <h2>Tags inside other tags</h2>
  <lrn-aside title="What is instructional design?" display="panelcard">
    <wikipedia-query search="Instructional_design"></wikipedia-query>
  </lrn-aside>
  <h2>Flexibility demonstration</h2>
  <p>Now, if done the right way, we can have our pedagogically focused tags utilize our design tags. This allows faculty and staff to write what they want as opposed to figuring out how they want to design content. Let's show the same example, lrn-aside, but visualized different ways with a single property tweak.<p>
  </lrn-aside>
  <h3>drawer (click to display)</h3>
  <lrn-aside title="What is instructional design?" display="drawer">
    <wikipedia-query search="Instructional_design"></wikipedia-query>
  </lrn-aside>
  <h3>a paper card</h3>
  <lrn-aside title="What is instructional design?" display="paper-card">
    <wikipedia-query search="Instructional_design"></wikipedia-query>
  </lrn-aside>
  <h3>Simple tweaks to the "sticky note"</h3>
  <p>
    <lrn-aside title="Did you know?" display="panelcard" sticky direction="right">
      Lions are awesome but very different from Nittany Lions? It's a fun fact!
    </lrn-aside>
    Lorem ipsum dolor sit amet, elit fusce erat, arcu pretium et ultricies velit, parturient faucibus sit dignissim varius, dui nibh ut tellus mauris dolor. Cursus vulputate erat dolore arcu sit egestas, suspendilacus vel in fringilla elit. Fusce tempus ante congue faucibus odio sed, gravida eu libero, elit gravida pede a id varius tempus. Aut massa vel sagittis sed vel donec, et eros. Amet nunc vivamus, gravida suspendisse integer vivamus ligula. Ultrices sociosqu ornare duis, eget tempor quisque.
  </p>
  <h2>More examples</h2>
  <h3>lrnsys-button - a consistent, accessible button</h3>
  <lrnsys-button raised href="http://www.yammer.com/psu.edu/" icon="assignment" label="Link some place else" hover-class="blue darken-3 white-text"></lrnsys-button>
  <h3>lrn-table - generate a table from a csv file</h3>
  <lrn-table csv-file="https://lrnwebcomponents.github.io/lrn-table/components/lrn-table/demo/demo.csv" title="My cool table" description="This has lots of student info"></lrn-table>
  <h3>lrndesign-avatar - display profile circles / images / art</h3>
<div style="display:flex">
  <lrndesign-avatar label="PSU" jdenticon color="blue"></lrndesign-avatar>
  <lrndesign-avatar src="https://unsplash.it/800/500/?image=50"></lrndesign-avatar>
  <lrndesign-avatar label="PSU" color="blue"></lrndesign-avatar>
  <lrndesign-avatar label="S" color="blue lighten-2"></lrndesign-avatar>
  <lrndesign-avatar label="U" color="blue darken-2"></lrndesign-avatar>
</div>
  <h1>The future... a system-less authoring experience, pedagogically and creator focused</h1>
  <h3>Hover over this</h3>
  <p>
    <lrn-aside title="Did you know?" display="panelcard" show-hax>
      Lions are awesome but very different from Nittany Lions? It's a fun fact!
    </lrn-aside>
    Lorem ipsum dolor sit amet, elit fusce erat, arcu pretium et ultricies velit, parturient faucibus sit dignissim varius, dui nibh ut tellus mauris dolor. Cursus vulputate erat dolore arcu sit egestas, suspendilacus vel in fringilla elit. Fusce tempus ante congue faucibus odio sed, gravida eu libero, elit gravida pede a id varius tempus. Aut massa vel sagittis sed vel donec, et eros. Amet nunc vivamus, gravida suspendisse integer vivamus ligula. Ultrices sociosqu ornare duis, eget tempor quisque
  </p>
  <h3>or this element</h3>
  <p>orem ipsum dolor sit amet, elit fusce erat, arcu pretium et ultricies velit, parturient faucibus sit dignissim varius, dui nibh ut tellus mauris dolor. Cursus vulputate erat dolore arcu sit egestas, suspendilacus vel in fringilla elit. Fusce tempus ante congue faucibus odio sed, gravida eu libero, elit gravida pede a id varius tempus. Aut massa vel sagittis sed vel donec, et eros. Amet nunc vivamus, gravida suspendisse integer vivamus ligula. Ultrices sociosqu ornare duis, eget tempor quisque</p>
  <lrn-aside title="Did you know?" display="blockquote" show-hax>
  Lions are awesome but very different from Nittany Lions? It's a fun fact!
  </lrn-aside>
  <p>orem ipsum dolor sit amet, elit fusce erat, arcu pretium et ultricies velit, parturient faucibus sit dignissim varius, dui nibh ut tellus mauris dolor. Cursus vulputate erat dolore arcu sit egestas, suspendilacus vel in fringilla elit. Fusce tempus ante congue faucibus odio sed, gravida eu libero, elit gravida pede a id varius tempus. Aut massa vel sagittis sed vel donec, et eros. Amet nunc vivamus, gravida suspendisse integer vivamus ligula. Ultrices sociosqu ornare duis, eget tempor quisque</p>
  <ul>
    <li><a href="https://lrnwebcomponents.github.io/lrndesign-panelcard/components/lrndesign-panelcard/demo/index.html">Touch and edit panelcards</a></li>
    <li><a href="https://lrnwebcomponents.github.io/lrndesign-blockquote/components/lrndesign-blockquote/demo/index.html">Touch and edit blockquotes</a></li>
    <li><a href="https://lrnwebcomponents.github.io/hax-content/components/hax-manager/demo/index.html">Click and build, touch and edit</a></li>
  </ul>
  <h2>Engage with us!</h2>
  <ul>
    <li><a href="https://www.elmsln.org/">Engage with the ELMS:LN Community</a></li>
    <li><a href="https://webcomponents.org/author/LRNWebComponents">Check out our web components!</a></li>
  </ul>
</div>
            
          
!
            
              /* Just like normal HTML elements, you can write CSS against them but only against the high level aspects of those elements */

/* this is a simple class that just makes sure our content isn't too insanely long. We tend NOT to use pixels to measure things. This helps with responsive design and makes sure you design in ratios. 1em is typically the equivalent of 16 pixels. This helps with ratios. 1rem means the pixel calculation is relative to the font-size of the document. These aren't big deals, just realize that ratio based design makes it easier to design things that are in proportion to each other more consistently. 10rem is also easier to say then "make that 160 pixels" :)

The amazing thing for Instructional designers and faculty is that you can get, complex well designed elements without ever touching css!
*/
.example-container {
  max-width:50rem;
}
/* limit-size so results aren't massive */
.limit-size {
  overflow: scroll;
  width: 50rem;
  height: 10rem;
  border: 2px solid black;
}
/* example class to make font bigger */
.the-paragraph-class {
  font-size: 1.5rem;
}

/* just like normal CSS, you can stack things together */
lrn-aside wikipedia-query {
  overflow-y: scroll;
  height: 10rem;
}
            
          
!
            
              /* You can also target things via javascript but there's an incentive to use JS internal to each element. That's not to say you can't use other frameworks (you can) but our experience is that you should make another element that contains these elements in order to achieve that. 

The amazing thing for Instructional designers and faculty is that you can get complex functionality without ever touching javascript!
*/

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console