Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

158 lines (155 sloc) 8.664 kb
{% extends "base.html" %}
{% block section_id %}main{% endblock %}
{% block page_id %}index{% endblock %}
{% block head %}
<link rel="stylesheet" type="text/css" href="/css/badges101.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox.css" media="screen" />
{% endblock %}
{% block bodyend %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.fancybox.js"></script>
<script src="/scripts/slides.min.jquery.js"></script>
<script src="/scripts/quickbadge.js"></script>
<script src="http://beta.openbadges.org/issuer.js"></script>
<script src="/scripts/quiz.js"></script>
<script src="/scripts/main.js"></script>
{% endblock %}
{% block content %}
<section id="content">
<section id="what-are-badges">
<div class="wrapper box">
<h1><span class="reduce">What are</span> Open Badges?</h1>
<p>
Learning today happens everywhere. But it's often difficult to get recognition for skills and achievements that happen online or out of school. Mozilla Open Badges helps solve that problem, making it easy for any organization to issue, manage and display digital badges across the web.
</p>
<p><em>Take the <b>Badges 101</b> quiz—and earn your first badge</em></p>
<a href="#badges-101" id="get-started" class="button right-arrow fancybox">get started</a>
<a href="http://beta.openbadges.org" id="backpack" class="right-arrow">visit your Mozilla Badge Backpack</a>
<div id="hands"></div>
</div>
<div id="dml-speech" class="box">Learn more about the <a href="{{ LOCALE_ROOT }}faq.html#dml-competition">DML Badge Competition</a>!</div>
</section>
<section id="main-nav">
<div class="col box">
<a href="{{ LOCALE_ROOT }}issuer.html">
<div class="badge" id="issuer_badge"></div>
<h2>Issuer</h2>
<p>I want to issue badges</p>
</a>
</div>
<div class="col box">
<a href="{{ LOCALE_ROOT }}user.html">
<div class="badge" id="earner_badge"></div>
<h2>Earner</h2>
<p>I want to earn and collect badges</p>
</a>
</div>
<div class="col box">
<a href="{{ LOCALE_ROOT }}displayer.html">
<div class="badge" id="displayer_badge"></div>
<h2>Displayer</h2>
<p>I want to display badges</p>
</a>
</div>
</section>
<section id="badges-101">
<div id="slides" role="main">
<div class="slides_container">
<div id="intro" class="slide">
<h1>Open Badges</h1>
<p class="tagline">Helping learners everywhere display skills, unlock career opportunities and level up in life</p>
<p>Let’s go through some of the basics about badges and earn your first badge in the process.</p>
<a class="next button">Start</a>
</div>
<div class="lesson slide">
<h1>Learning today happens everywhere.</h1>
<p class="detail"> But it's often difficult to get recognition for skills and achievements that happen outside of school. Mozilla's Open Badges is working to solve that problem, making it easy for anyone to issue, earn and display badges across the web—through a shared infrastructure that's free and open to all.</p>
<a class="next button">Next</a>
</div>
<div class="lesson slide">
<h1>Open Badge Infrastructure</h1>
<p class="detail">The Mozilla Open Badge Infrastructure enables any organization or community to issue badges backed by their own seal of approval. Learners/users can then collect badges from different sources and share them across the web, unlocking new career and learning opportunities.</p>
<a class="next button">Next</a>
</div>
<div class="quiz slide">
<h1>Your First Badge</h1>
<p id="quiz-intro">Now let's see how much you get badges!</p>
<section class="question">
<p>True or False: Learning today happens everywhere, not just in classrooms.</p>
</section>
<section class="options">
<a class="true button correct">True</a>
<a class="false button">False</a>
</section>
<section class="discussion">
<p><span class="answer">Answer: True.</span> There are countless examples of learning occurring through informal channels. The web and other new learning spaces provide exciting new ways to gain skills and experiences—from online courses, learning networks and mentorship to peer learning, volunteering and after-school programs.</p>
<a class="next button">Next</a>
</section>
</div>
<div class="quiz slide">
<h1>Your First Badge</h1>
<section class="question">
<p>True or False: You can understand a person’s skill set simply by looking at their degree.</p>
</section>
<section class="options">
<a class="true button">True</a>
<a class="false button correct">False</a>
</section>
<section class="discussion">
<p><span class="answer">Answer: False.</span> While degrees do convey information about people’s skills, they often tend to be abstracted from the actual learning that has occurred. Two people with the same degree may have taken very different learning pathways or developed different skills. Many people without a formal degree possess a vast set of job-relevant skills. Badges help by providing a more complete picture, recognizing a more granular set of skills.</p>
<a class="next button">Next</a>
</section>
</div>
<div class="quiz slide">
<h1>Your First Badge</h1>
<section class="question">
<p>True or False: Resumes are validated and evidence-based.</p>
</section>
<section class="options">
<a class="true button">True</a>
<a class="false button correct">False</a>
</section>
<section class="discussion">
<p>
<span class="answer">Answer: False.</span> Resumes are documents that people write themselves. Granular information on a resume is often difficult to validate. With digital badges, users can click on a given badge to access information about the badge’s issuer, how the badge was earned, and more. In other words, badges can go beyond traditional resumes by providing built-in evidence for validation.
</p>
<a class="next button">Next</a>
</section>
</div>
<div id="final" class="slide">
<section id="incomplete">
<p>Take the quiz to see if you get badges!</p>
</section>
<section id="win">
<!-- Point to the image on github so that the backpack can access it if the user decides to send their badge there. -->
<img id="badges101" src="https://github.com/toolness/openbadges.org/raw/master/static/img/index/101badge.png" />
<h1>Badges 101</h1>
<p>Congratulations! You’ve just earned the Badges 101 badge!</p>
<section id="nav-panel">
<nav>
<a id="push-to-backpack" class="backpack">Push this badge to your Mozilla backpack</a>
<a id="navigator" href="http://toolness.github.com/hackasaurus-parable/navigator-badge/#">Go earn the Hackasaurus Navigator badge</a>
</nav>
</section>
<section id="get-badge">
<p class="instructions">If you'd like to send this badge to your Mozilla backpack, just fill out the form below.</p>
<form>
<input type="text" id="email" placeholder="E-mail Address">
<input type="submit" value="Send To Backpack »" id="submit">
</form>
<p><small>This will push your badge to the Mozilla Badge Backpack which is governed by the Mozilla Badge Backpack Terms of Use and Privacy Policy.</small></p>
<img src="/img/ajax-loader.gif" id="throbber" style="display: none">
</section>
<section id="after-badge">
<nav>
<a class="backpack" href="http://beta.openbadges.org/">Visit your Mozilla backpack</a>
<a id="navigator" href="http://toolness.github.com/hackasaurus-parable/navigator-badge/#">Go earn the Hackasaurus Navigator badge</a>
</nav>
</section>
</section>
</div>
</div>
</div>
</section>
</section>
{% endblock %}
Jump to Line
Something went wrong with that request. Please try again.