Grapevine Branches

Grapevine Branches are embeddable course pieces for your own website: the same course cards, outlines and lessons as on Grapevine, on your pages. Each one below is live, against a sample site.

Adding a Branch

<script src="https://grapevinelearning.org/branches/v1/grapevine.js"
        data-key="$GRAPEVINE_PUBLISHABLE_KEY"
        data-site="https://your-site.grapevinelearning.org"></script>

<gvl-course-card course="12"></gvl-course-card>

Your site's publishable key, from Site Admin → API. Add your website to "Websites allowed to use it" there too.

Course card

One course as the catalog shows it: its facts, first modules and lesson count. The whole card is the link.

<gvl-course-card course="57"></gvl-course-card>

branches.create("course-card", {"course":57}).mount("#here");

Course outline

The syllabus a visitor sees: modules, lesson titles and kinds, and when each module opens.

<gvl-course-outline course="57"></gvl-course-outline>

branches.create("course-outline", {"course":57}).mount("#here");

Catalog

Every course in the site's order, with search and paging. Or just the courses you list.

<gvl-catalog per-page="6"></gvl-catalog>

branches.create("catalog", {"perPage":6}).mount("#here");

Sign in

A learner signs in with a code emailed to them, for pages with no server of their own.

Try it: sign in as amara@example.com with the code 424242. The sample site emails nothing.

<gvl-sign-in></gvl-sign-in>

branches.create("sign-in", {}).mount("#here");

Course

The whole course for an enrolled learner: the outline with their progress, and the lesson player.

Shown as a sample learner. Open a lesson and answer its questions; nothing is kept.

<gvl-course course="57"></gvl-course>

branches.create("course", {"course":57}).mount("#here");

Enroll

The right way in for this visitor, including paying on your own page.

Shown as a sample learner. On the paid course the card field is Stripe's own; nothing is charged.

<gvl-enroll course="65"></gvl-enroll>

branches.create("enroll", {"course":65}).mount("#here");

A free course

A paid course

My courses

The courses a learner is on, as cards, as Grapevine's My Courses page shows them.

Shown as a sample learner.

<gvl-my-courses></gvl-my-courses>

branches.create("my-courses", {}).mount("#here");

Progress

How far a learner is through one course, as a bar or a line of text.

<gvl-progress course="57"></gvl-progress>

branches.create("progress", {"course":57}).mount("#here");

A bar

A line of text

My grades

A learner's points on a course, each graded answer and the teacher's feedback.

<gvl-my-grades course="57"></gvl-my-grades>

branches.create("my-grades", {"course":57}).mount("#here");

Lesson

One lesson of a course, with its questions checked by Grapevine.

Shown as a sample learner. Answer the question; nothing is kept.

<gvl-lesson lesson="63"></gvl-lesson>

branches.create("lesson", {"lesson":63}).mount("#here");

Links

For staff: the Grapevine areas they may open, such as the gradebook or Site Admin.

Being built. It appears here, live, as soon as it is ready.

<gvl-links></gvl-links>

branches.create("links", {}).mount("#here");

Gradebook

For a teacher: their roster and the grading queue, graded from your own page.

Being built. It appears here, live, as soon as it is ready.

<gvl-gradebook></gvl-gradebook>

branches.create("gradebook", {}).mount("#here");