Skip to content

E
edx-platform
Commit f2ef2b03 by Harry Rein
Options

Adding eventing to the course tools. 

LEARNER-1652

We now send log events when the user clicks on the events in the course
toolbar, representing a change to the new page.
parent 2eea7606
Showing with 155 additions and 1 deletions
openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html 0 → 100644
<div class="course-view container" id="course-container">
<header class="page-header has-secondary">
<div class="page-header-main">
<nav aria-label="Course Outline" class="sr-is-focusable" tabindex="-1">
<h2 class="hd hd-3 page-title">Reviews Test Course</h2>
</nav>
</div>
<div class="page-header-secondary">
<div class="page-header-search">
<form class="search-form" role="search" action="/courses/course-v1:W3Cx+HTML5.0x+1T2017/search/">
<label class="field-label sr-only" for="search" id="search-hint">Search the course</label>
<input
class="field-input input-text search-input"
type="search"
name="query"
id="search"
placeholder="Search the course"
/>
<button class="btn btn-small search-button" type="submit">Search</button>
</form>
</div>
<div class="form-actions">
<a class="btn btn-brand action-resume-course" href="${resume_course_url}">
Start Course
</a>
</div>
</div>
</header>
<div class="page-content">
<div class="layout layout-1t2t">
<main class="layout-col layout-col-b">
<div class="section section-dates">
<div class="welcome-message">
<div class="dismiss-message">
<button type="button" class="btn-link">Dismiss</button>
</div>
This is a major update!
</div>
</div>
<main role="main" class="course-outline" id="main" tabindex="-1">
<ol class="block-tree" role="tree">
<li aria-expanded="true" class="outline-item focusable section" id="block-v1:W3Cx+HTML5.0x+1T2017+type@chapter+block@451e0388724c4f1fafba1b218ce16582" role="treeitem" tabindex="0">
<div class="section-name">
<h3>Testing</h3>
</div>
<ol class="outline-item focusable" role="group" tabindex="0">
<li class="subsection " role="treeitem" tabindex="-1" aria-expanded="true">
<a class="outline-item focusable" href="http://localhost:8000/courses/course-v1:W3Cx+HTML5.0x+1T2017/jump_to/block-v1:W3Cx+HTML5.0x+1T2017+type@sequential+block@77a74ef4daa74c83b00d0b1e0e6d81f6" id="block-v1:W3Cx+HTML5.0x+1T2017+type@sequential+block@77a74ef4daa74c83b00d0b1e0e6d81f6">
<div class="subsection-text">
<span class="subsection-title">Still Testing Subsection</span>
<div class="details">
</div> <!-- /details -->
</div> <!-- /subsection-text -->
<div class="subsection-actions">
</div>
</a>
</li>
</ol>
</li>
</ol>
</main>
</main>
<aside class="course-sidebar layout-col layout-col-a">
<div class="section section-tools">
<h3 class="hd-6">Course Tools</h3>
<ul class="list-unstyled">
<li>
<a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/bookmarks/">
<span class="icon fa fa-bookmark" aria-hidden="true"></span>
Bookmarks
</a>
</li>
<li>
<a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/course/reviews">
<span class="icon fa fa-star" aria-hidden="true"></span>
Reviews
</a>
</li>
<li>
<a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/course/updates">
<span class="icon fa fa-newspaper-o" aria-hidden="true"></span>
Updates
</a>
</li>
</ul>
</div>
<div class="section section-dates">
<h3 class="hd hd-6 handouts-header">Important Course Dates</h3>
<div class="date-summary-container">
<div class="date-summary date-summary-todays-date">
<span class="hd hd-6 heading localized-datetime" data-datetime="2017-07-13 17:31:27.952061+00:00" data-string="Today is {date}" data-timezone="None" data-language="en">Today is Jul 13, 2017 13:31 EDT</span>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>
openedx/features/course_experience/static/course_experience/js/CourseHome.js 0 → 100644
/* globals Logger */
export class CourseHome { // eslint-disable-line import/prefer-default-export
constructor(options) {
// Logging for course tool click events
const $courseToolLink = $(options.courseToolLink);
$courseToolLink.on('click', () => {
const courseToolName = document.querySelector('.course-tool-link').text.trim().toLowerCase();
Logger.log(
'edx.course.tool.accessed',
{
tool_name: courseToolName,
page: 'course_home',
},
);
});
}
}
openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js 0 → 100644
/* globals Logger, loadFixtures */
import { CourseHome } from '../CourseHome';
describe('Course Home factory', () => {
describe('Ensure course tool click logging', () => {
let home; // eslint-disable-line no-unused-vars
beforeEach(() => {
loadFixtures('course_experience/fixtures/course-home-fragment.html');
home = new CourseHome({
courseToolLink: '.course-tool-link',
});
spyOn(Logger, 'log');
});
it('sends an event when an course tool is clicked', () => {
document.querySelector('.course-tool-link').dispatchEvent(new Event('click'));
const courseToolName = document.querySelector('.course-tool-link').text.trim().toLowerCase();
expect(Logger.log).toHaveBeenCalledWith(
'edx.course.tool.accessed',
{
tool_name: courseToolName,
page: 'course_home',
},
);
});
});
});
openedx/features/course_experience/templates/course_experience/course-home-fragment.html
......@@ -74,7 +74,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
<ul class="list-unstyled">
% for course_tool in course_tools:
<li>
<a href="${course_tool.url(course_key)}">
<a class="course-tool-link" href="${course_tool.url(course_key)}">
<span class="icon ${course_tool.icon_classes()}" aria-hidden="true"></span>
${course_tool.title()}
</a>
......@@ -102,3 +102,9 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
% endif
</div>
</%block>
<%static:webpack entry="CourseHome">
new CourseHome({
courseToolLink: ".course-tool-link",
});
</%static:webpack>
webpack.config.js
......@@ -18,6 +18,7 @@ var wpconfig = {
context: __dirname,
entry: {
CourseHome: './openedx/features/course_experience/static/course_experience/js/CourseHome.js',
CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js',
CourseSock: './openedx/features/course_experience/static/course_experience/js/CourseSock.js',
CourseTalkReviews: './openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment