The following UI elements can be used to decorate your Moodle contents and create interactivity, all within the Moodle editor. They use a combination of Bootstrap and FontAwesome, both being integrated into Moodle making editing a breeze.

This page has been modified from birdyoz.github.io. Thank you to Greg Bird for his contribution to engaging e-learning content.

Copy the below code into the HTML source in the text editor

<!-- Fancy Blockquotes -->
<blockquote class="blockquote"><i aria-hidden="true" class="fa fa-fw fa-quote-left fa-2x fa-pull-left text-muted"></i>
    <p> Insert quote here</p><i aria-hidden="true"
            class="fa fa-fw fa-quote-right fa-2x fa-pull-right text-muted"></i>
    <div class="blockquote-footer"> Insert citation here </div>
</blockquote>
<!-- End of Fancy Blockquotes -->

Hide

Copy the below code into the HTML source in the text editor

<!-- Question box -->
<div class="well card" style="padding: 10px">
    <h4 style="color: #0047bb !important"><i aria-hidden="true" class="fa fa-question"></i> Question</h4>
    <p>Insert content here</p>
</div>
<!-- End of Question box -->

Hide

Copy the below code into the HTML source in the text editor

<!-- Read box -->
<div class="well card" style="padding: 10px">
    <h4 style="color: #0047bb !important"><i aria-hidden="true" class="fa fa-book"></i> Read</h4>
    <p>Insert content here</p>
</div>
<!-- End of read box -->

Hide

Copy the below code into the HTML source in the text editor

<!-- Forum w/info box -->
<div class="well card" style="padding: 10px">
    <h4 style="color: #0047bb !important"><i aria-hidden="true" class="fa fa-comments"></i>&nbsp;Forum</h4>
    <p>Insert forum question content here.</p>
    <p></p>
    <div class="alert alert-info" role="alert">
        Record your responses in the <b>[insert forum name here]</b>.

    </div>
</div>
<!-- End of Forum w/info box -->

Hide

Copy the below code into the HTML source in the text editor

<!-- Portfolio box -->
<div class="well card" style="padding: 10px">
    <h4 style="color: #0047bb !important"><i aria-hidden="true" class="fa fa-flag"></i> Portfolio - [Name of Portfolio activity]</h4>
    <p>Insert description of portfolio activity here</p>
    <div class="alert alert-warning" role="alert">
        Record your responses in your chosen portfolio of evidence.</div>
</div>
<!-- End of Portfolio box -->

Hide

Copy the below code into the HTML source in the text editor

With Transcript area

<!-- Video box w/transcript -->
<div class="well card" style="padding: 10px">
    <h4 style="color: #0047bb !important"><i aria-hidden="true" class="fa fa-play-circle-o"></i> Name of video - duration in brackets (00:00)</h4>
    <p>Insert video here</p>
    <div class="text-right">
        <small class="text-muted"><a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="collapsed">Text transcript</a></small>
    </div>
    <div class="collapse" id="collapseExample" aria-expanded="false" style="">
        <!-- Terxt transcript -->
        <div class="well card text-muted" style="padding: 10px !important; margin: 10px !important; border-color: #aaa !important">
            <h5>Text transcript</h5>
            <p>[Paste transcript here]</p>
            <div class="text-center">
                <a class="btn btn-primary text-center collapsed" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><i aria-hidden="true" class="fa fa-chevron-circle-up"></i> Close transcript</a>
            </div>
        </div>
    </div>
</div>
<!-- End of Video w/transcript box -->

Without Transcript area

<!-- Video box w/no transcript -->
<div class="well card" style="padding: 10px">
    <h4 style="color: #0047bb !important"><i aria-hidden="true" class="fa fa-play-circle-o"></i> Name of video - duration in brackets (00:00)</h4>
    <p>Insert video here</p>
    <div class="text-right">
        <small class="text-muted"><a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="collapsed">Text transcript</a></small>
    </div>
    <div class="collapse" id="collapseExample" aria-expanded="false" style="">
       
    </div>
</div>
<!-- End of Video w/no transcript box -->

Hide

Copy the below code into the HTML source in the text editor

<!-- Activity box -->
<div class="well card" style="padding: 10px">
    <h4 style="color: #0047bb !important"><i aria-hidden="true" class="fa fa-tasks"></i> Activity</h4>
    <p>Insert content here. Use this for basic activities</p>
</div>
<!-- End of Activity box -->

Hide

Activity - [name of activity]

Insert instructions here. Use this for extended activities where the student needs to record their findings.

Record your responses in fields provided and use the 'export text' button at the and of the actvity to download your completed document. Bring this document with you to your next face-to-face class to discuss with your teacher and fellow students.

Copy the below code into the HTML source in the text editor

<!-- Extended Activity box -->
<div class="well card" style="padding: 10px">
    <h4 style="color: #0047bb !important"><i aria-hidden="true" class="fa fa-tasks"></i> Activity - [name of activity]</h4>
    <p>Insert instructions here. Use this for extended activities where the student needs to record their findings.</p>
    <div class="alert alert-warning" role="alert">
        Record your responses in fields provided and use the 'export text' button at the and of the actvity to download your completed document. Bring this document with you to your next face-to-face class to discuss with your teacher and fellow students.

    </div>
</div>
<!-- End of Extended Activity box -->

Hide

Copy the below code into the HTML source in the text editor

<!-- Further information box -->
<div class="well card" style="padding: 10px">
    <h4 style="color: #0047bb !important"><i aria-hidden="true" class="fa fa-info-circle"></i> Further information</h4>
    <p>Insert content here</p>
</div>
<!-- End of Further information box -->

Hide

Alerts

Use alert boxes when you want specific instruction to stand out on the page. Limit the use of these to a maximum of 2 alert boxes per page and don't include on every page.

Copy the below code into the HTML source in the text editor

<!-- Success alert -->
<div class="alert alert-success" role="alert">
    <p><strong>Success:</strong> Insert details/description here.</p>
</div>
<!-- End of success alert -->

Hide

Copy the below code into the HTML source in the text editor

<!-- Info alert -->
<div class="alert alert-info" role="alert">
    <p><strong>Info:</strong> Insert details/description here.</p>
</div>
<!-- End of info alert -->

Hide

Copy the below code into the HTML source in the text editor

<!-- Warning alert -->
<div class="alert alert-warning" role="alert">
    <p><strong>Consider:</strong> Insert details/description here.</p>
</div>
<!-- End of warning alert -->

Hide

Copy the below code into the HTML source in the text editor

<!-- Danger altert -->
<div class="alert alert-danger" role="alert">
    <p><strong>Important:</strong> Insert details/description here.</p>
</div>
<!-- End of Danger altert -->

Hide

Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Copy the below code into the HTML source in the text editor

<!-- Start of Carousel box -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class=""></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item">
            <img class="d-block w-100" src="https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png" alt="First slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>picture 1 title</h5>
                <p>caption of image</p>
            </div>
        </div>
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png" alt="Second slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>picture 2 title</h5>
                <p>caption of image</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png" alt="Third slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>picture 3 title</h5>
                <p>caption of image</p>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!-- End of Carousel box -->

Hide

Image Modal

A floating image that can enlarge within a modal window. Place code above the text in the HTML source.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor finibus lectus. Donec odio libero, tempus quis euismod ut, malesuada vel lorem. Vivamus sit amet enim at sem consequat egestas. Integer ullamcorper nisl nulla, quis auctor dui lacinia vitae. Sed tellus nunc, eleifend nec posuere nec, aliquam eu ante. Nunc imperdiet lacus nec massa tempus aliquam. Phasellus rutrum pretium lorem et tempor. Nunc nec ligula venenatis, congue dui vel, congue risus. Nullam tincidunt, augue mollis bibendum commodo, magna mauris cursus tortor, vel laoreet ligula libero vitae purus. Aliquam vitae erat neque. Fusce sagittis nisl ut ipsum cursus gravida. Integer ullamcorper diam eu interdum congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Aliquam sit amet pretium lectus. Morbi vestibulum sapien id aliquet mollis. Morbi mattis ante neque, ut imperdiet mauris sodales sit amet. Donec mollis arcu nec mollis maximus. Mauris non quam ut elit lacinia scelerisque. Maecenas et iaculis nisl. Suspendisse potenti. Sed porttitor metus mauris, sed mollis dolor pharetra vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla gravida enim magna. Sed gravida risus at sem tincidunt, ac fringilla arcu ultrices. Fusce nec diam non leo ultricies dapibus ut vitae arcu.

Copy the below code into the HTML source in the text editor

<!-- Start of Image Modal box -->
<!-- Start of smaller image-->
<div class="float-right" style="float: right; width: 30%; max-width: 320px; min-width: 200px; margin:0 10px 10px 20px !important">
    <a type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        <!-- Change smaller image here -->
        <img src="https://source.unsplash.com/qqd8APhaOg4" class="img-responsive img-fluid"><br>Click to view larger image</a>
</div>
<!-- End of smaller image-->
<!-- Start of larger image-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <!-- Change larger image here -->
                <img src="https://source.unsplash.com/qqd8APhaOg4" class="img-responsive img-fluid" style="width: 100%;">
                <p>Insert image caption here</p>
            </div>
        </div>
    </div>
</div>
<!-- End of larger image box-->

Hide

3 Card deck with top image

Copy the below code into the HTML source in the text editor

<!-- Start of Card Group - With top image and footnote -->
<div class="card-group">
    <!-- Start of first card -->
    <div class="card">
        <img src="https://via.placeholder.com/320x180?text=Replace+Me" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Card body text</p>
        </div>
    </div>
    <!-- End of first card -->
    <!-- Start of second card -->
    <div class="card">
        <img src="https://via.placeholder.com/320x180?text=Replace+Me" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Card body text</p>

        </div>
    </div>
    <!-- End of second card -->
    <!-- Start of third card.  Delete if not required. -->
    <div class="card">
        <img src="https://via.placeholder.com/320x180?text=Replace+Me" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Card body text</p>

        </div>
    </div>
    <!-- End of third card -->
</div>
<!-- End of Card Group.-->

Hide

Floated Image

Copy the below code into the HTML source in the text editor

<!-- Forum w/info box -->
<div class="well card" style="padding: 10px">
    <h4 style="color: #0047bb !important"><i aria-hidden="true" class="fa fa-comments"></i>&nbsp;Forum</h4>
    <p>Insert forum question content here.</p>
    <p></p>
    <div class="alert alert-info" role="alert">
        Record your responses in the <b>[insert forum name here]</b>.

    </div>
</div>
<!-- End of Forum w/info box -->

Hide

Attribution

For text that requires some form of attribution in a subtle way (less opacity and smaller size)