forked from MozillaFoundation/foundation.mozilla.org
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request MozillaFoundation#1 from chris-lawton/6885-info-se…
…ction-1 [6885] Info section 1
- Loading branch information
Showing
6 changed files
with
136 additions
and
25 deletions.
There are no files selected for viewing
21 changes: 21 additions & 0 deletions
21
...ages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/accordion-section-1.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| {% load i18n %} | ||
|
|
||
| <p class="mb-5 pb-3">{% trans "YouTube Regrets are primarily a result of the recommendation algorithm, meaning videos that YouTube chooses to amplify, rather than videos that people sought out." %}</p> | ||
| <h2 class="heading-2 mb-5">{% trans "71% of all regret reports came from videos recommended to our users and recommended videos were 1.4 times more likely to be regretted than videos searched for. " %}</h2> | ||
| <div class="col-12 col-lg-8 mx-auto"> | ||
| <canvas class="" width="410" height="410" id="recommendations-pie-chart"></canvas> | ||
| </div> | ||
| {% blocktrans %} | ||
| <p class="mt-5 mb-lg-5 pb-lg-5">The regrets our volunteers flagged had tons of views, but it’s impossible to tell how many of those views came from YouTube’s recommendation algorithm, because <span class="fw-bold">YouTube won’t release this information</span>.</p> | ||
| {% endblocktrans %} | ||
|
|
||
| <div class="row flex-column-reverse flex-lg-row"> | ||
| <div class="col-12 col-lg-5"> | ||
| {% include "./standout-stat.html" with heading="Reported Videos" number="~5,794" label="views per day" classes="mb-5" %} | ||
| {% include "./standout-stat.html" with heading="Other Videos" number="~3,312" label="views per day" %} | ||
| </div> | ||
| <div class="col-12 col-lg-6 offset-lg-1 mt-3 mt-lg-3"> | ||
| <h2 class="heading-2 mb-4">{% trans "What we do know is that reported videos seemed to accumulate views faster than those that were not." %}</h2> | ||
| <p>{% trans "At the time they were reported, YouTube Regrets had a median of 5,794 views per day they were on the platform, while other videos our volunteers watched had only 3,312 views per day." %}</p> | ||
| </div> | ||
| </div> |
12 changes: 12 additions & 0 deletions
12
...gtailpages/templates/wagtailpages/pages/youtube-regrets-2021/fragments/standout-stat.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| {% load i18n %} | ||
|
|
||
| <div class="standout-stat {% if classes %}{{ classes }}{% endif %}"> | ||
| {% if heading %} | ||
| <p class="standout-stat__heading mb-0">{{ heading }}</p> | ||
| {% endif %} | ||
|
|
||
| <div class="standout-stat__wrap text-center p-4"> | ||
| <p class="standout-stat__number mb-2">{{ number }}</p> | ||
| <p class="standout-stat__label mb-0">{% trans label %}</p> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
source/js/foundation/pages/youtube-regrets/recommendations-pie-chart.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { Chart, registerables } from 'chart.js'; | ||
|
|
||
| export const initYouTubeRegretsRecommendationsPieChart = () => { | ||
| Chart.register(...registerables); | ||
|
|
||
| const categoriesChart = document.getElementById('recommendations-pie-chart'); | ||
| const ctx = categoriesChart.getContext('2d'); | ||
|
|
||
| const chart = new Chart(ctx, { | ||
| type: 'doughnut', | ||
| data: { | ||
| labels: [ | ||
| 'Recommendation', | ||
| 'Search', | ||
| 'Other' | ||
| ], | ||
| datasets: [{ | ||
| data: [71.1, 21.5, 7.47], | ||
| backgroundColor: [ | ||
| '#FC4147', | ||
| '#080708', | ||
| '#FBD5D7', | ||
| ], | ||
| }] | ||
| }, | ||
| options: { | ||
| plugins: { | ||
| legend: { | ||
| labels: { | ||
| font: { | ||
| size: 18, | ||
| family: 'Nunito Sans', | ||
| color: 'black', | ||
| }, | ||
| } | ||
| }, | ||
| tooltip: { | ||
| callbacks: { | ||
| label: (context) => `${context.parsed}%`, | ||
| }, | ||
| }, | ||
| }, | ||
| } | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters