Course Creator Code Snippets for Moodle

<div class="card" style="/* border-left:5px solid #ddd; */">
<div class="card-header"><strong>Header Text</strong>
<div class="badge badge-light border float-right p-2" type="button" data-toggle="collapse"
data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample">
More information...
</div>
</div>
<div class="card-body collapse" id="collapseExample" style="">
Some content.
</div>
</div>

<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="https://ricoshae.com.au/assets/banner-empirebetween.jpg"
alt="First slide">
<div class="carousel-caption d-md-block " style="background-color:#00000069;">
<h3>EMPIRE BETWEEN</h3>
<p>Check out the music at <a target="_blank"
href="https://empirebetween.com">empirebetween.com</a></p>
</div>
</div>
</div>
</div>
</div>

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action ">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Steve B</h5>
<small class="text-muted">1 week s ago</small>
</div>
<p class="mb-1">Some content.</p>
<small class="text-muted">And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Chris R</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some content.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Steve B</h5>
<small class="text-muted">10 minutes ago</small>
</div>
<p class="mb-1">Some content.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>

<div class="card">
<div class="card-header">
<strong>Video title</strong>
</div>
<div class="row" style="margin-top:0px;">
<div class="col-md-8">
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;"><iframe
title="youtube-player" src="https://www.youtube.com/embed/vkhF6-2wk6s" style="position:
absolute;top: 0; left: 0; width: 100%; height: 100%;" frameborder="0"
allowfullscreen=""></iframe></div>
</div>
<div class="col-md-4">
<div class="card-body">
Video information, description or transcript
</div>
</div>
</div>
</div>

<div class="container">
<div class="card" style="border-left:5px solid orange">
<div class="card-body">
<span class="small text-muted float-right">20 January 2010</span>
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div></div>
<div style="border-right:2px solid #ddd; width:50%;height:50px;"></div>
<div class="card" style="border-left:5px solid orange">
<div class="card-body">
<span class="small text-muted float-right">14 March 2013</span>
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div> </div>
<!-- Start card -->
<div style="border-right:2px solid #ddd; width:50%;height:50px;"></div>
<div class="card" style="border-left:5px solid orange">
<div class="card-body">
<span class="small text-muted float-right">8 December 2021</span>
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<!-- End card -->

<ul class="fa-ul">
<li class="mb-3"> <span class="fa-stack" style="margin-left: -34px;">
<span class="fa fa-circle fa-stack-2x"></span>
<strong class="fa-stack-1x text-white">
1
</strong>
</span> List icons can fdadf asdf asdf asdf asdf asdf asdfa sdf asdf asdf asdf afasdf qsdfa sfda
sdf asdfa sdfasdfasf asdfs </li>
<li class="mb-3"> <span class="fa-stack" style="margin-left: -34px;">
<span class="fa fa-circle fa-stack-2x"></span>
<strong class="fa-stack-1x text-white">
2
</strong>
</span> List icons can fdadf asdf asdf asdf asdf asdf asdfa sdf asdf asdf asdf afasdf qsdfa sfda
sdf asdfa sdfasdfasf asdfs </li>
<!-- bullet start -->
<li class="mb-3"> <span class="fa-stack" style="margin-left: -34px;">
<span class="fa fa-circle fa-stack-2x"></span>
<strong class="fa-stack-1x text-white">
3
</strong>
</span> List icons can fdadf asdf asdf asdf asdf asdf asdfa sdf asdf asdf asdf afasdf qsdfa sfda
sdf asdfa sdfasdfasf asdfs </li>
<!-- bullet end -->
</ul>

<div class="card" id="truefalse01">
<div class="card-header">
Question: Select true or false....
</div>
<div class="card-body">
<div class="form-check">
<input class="form-check-input" type="radio" name="questiongroup" id="answer1"
value="option1" data-toggle="collapse" data-target="#istrue">
<label class="form-check-label" for="exampleRadios1">
True
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="questiongroup" id="answer2"
value="option2" data-toggle="collapse" data-target="#isfalse">
<label class="form-check-label" for="exampleRadios2">
False
</label>
</div>
</div>
<div class="card-footer">
<p id="istrue" data-parent="#truefalse01" class="collapse">Replace with response if
true</p>
<p id="isfalse" data-parent="#truefalse01" class="collapse">Replace with response if
false</p>
</div>
</div>

<div class="card-deck">
<div class="card">
<img src="https://ricoshae.com.au/placeholders/placeholder.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Image title</h5>
<p class="card-text">Image Description: This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Image attribution</small>
</div>
</div>
<div class="card">
<img src="https://ricoshae.com.au/placeholders/placeholder.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Image title</h5>
<p class="card-text">Image Description: This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Image attribution</small>
</div>
</div>
<!-- START CARD -->
<div class="card">
<img src="https://ricoshae.com.au/placeholders/placeholder.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Image title</h5>
<p class="card-text">Image Description: This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Image attribution</small>
</div>
  </div>
<!-- END CARD -->
</div>

<div class="bd-example" style="background-color:green">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"
data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
</ol>
<div class="carousel-inner" style="height:350px" role="listbox">
<div class="carousel-item active">
<div class="carousel-caption d-block" style="position:initial !important;">
<h3>First slide heading</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<!-- Start Item -->
<div class="carousel-item">
<div class="carousel-caption d-block" style="position:initial !important;">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- End item -->
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

<div class="card" id="multiplechoice">
<div class="card-header">
Question: Select the best answer to this question....
</div>
<div class="card-body">
<div class="form-check">
<input class="form-check-input" type="radio" name="questiongroup" id="answer1"
data-toggle="collapse" data-target="#response1">
<label class="form-check-label" for="exampleRadios1">
Answer 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="questiongroup" id="answer2"
data-toggle="collapse" data-target="#response2">
<label class="form-check-label" for="exampleRadios2">
Answer 2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="questiongroup" id="answer3"
data-toggle="collapse" data-target="#response3">
<label class="form-check-label" for="exampleRadios2">
Answer 3
</label>
</div>
<!-- New answer start -->
<div class="form-check">
<input class="form-check-input" type="radio" name="questiongroup" id="answer4"
data-toggle="collapse" data-target="#response4">
<label class="form-check-label" for="exampleRadios2">
Answer 4
</label>
</div>
<!-- New answer end -->
</div>
<div class="card-footer">
<p id="response1" data-parent="#multiplechoice" class="collapse">Replace with response 1</p>
<p id="response2" data-parent="#multiplechoice" class="collapse">Replace with response 2</p>
<p id="response3" data-parent="#multiplechoice" class="collapse">Replace with response 3</p>
<!-- New response start -->
<p id="response4" data-parent="#multiplechoice" class="collapse">Replace with response 4</p>
<!-- New response end -->
</div>
</div>