← Обратно

Вграждане на графики

Вграждайте интерактивни графики от НВО и ДЗИ във вашия уебсайт чрез iframe

Base URL: https://ivandavidov.github.io/nvo/{клас}/embed.html

Бързо начало

Поставете следния HTML код на вашия сайт:

<iframe
  src="https://ivandavidov.github.io/nvo/7/embed.html?i7=178,179,181"
  width="100%"
  height="1100"
  frameborder="0"
  scrolling="no"
  style="border: none; max-width: 100%;"
  loading="lazy"
  title="НВО 7 клас - Графики"
></iframe>
Параметърът за училища (напр. i7=178,179,181) съдържа индексите на училищата, разделени със запетая. Индексите могат да бъдат намерени в URL адреса на основния сайт при избор на училища.

Налични класове

КласEmbed URLПараметър за училища
4 клас /nvo/4/embed.html i4
7 клас /nvo/7/embed.html i7
10 клас /nvo/10/embed.html i10
12 клас /nvo/12/embed.html i12

URL параметри

ПараметърТипОписаниеПримерна стойност
i4 / i7 / i10 / i12 string Индекси на училища, разделени със запетая. Параметърът зависи от класа. i7=178,179,181
chart string Показване на само една графика: b (Български език) или m (Математика / Втора матура). Без параметър се показват и двете. chart=b
theme string Фиксирана тема: dark или light. Без параметър темата следва предпочитанията на браузъра. theme=dark
year number Показване на данни до посочената година (включително). Полезно за исторически изглед. year=2023

Как да намеря индексите на училищата?

  1. Отворете страницата за съответния клас, например НВО след 7 клас.
  2. Изберете желаните училища, като щракнете върху техните бутони.
  3. Погледнете URL адреса в браузъра — той ще съдържа параметър като ?i7=178,179,181.
  4. Копирайте числата и ги използвайте в embed URL-а.

Препоръчителна височина на iframe

РежимПрепоръчителна височина
Двете графики (по подразбиране) 1100px
Само една графика (chart=b или chart=m) 600px
Височината може да варира в зависимост от броя на избраните училища (повече училища означават по-голяма легенда). Адаптирайте стойността при нужда.

Примери за вграждане

4 клас — Двете графики

HTML код:

<iframe src="https://ivandavidov.github.io/nvo/4/embed.html?i4=135,39"
  width="100%" height="1100" frameborder="0" scrolling="no" style="border:none"
  loading="lazy" title="НВО 4 клас"></iframe>

Резултат:

7 клас — Двете графики

HTML код:

<iframe src="https://ivandavidov.github.io/nvo/7/embed.html?i7=178,179,181"
  width="100%" height="1100" frameborder="0" scrolling="no" style="border:none"
  loading="lazy" title="НВО 7 клас"></iframe>

Резултат:

7 клас — Само Български език (chart=b)

HTML код:

<iframe src="https://ivandavidov.github.io/nvo/7/embed.html?i7=178,179,181&chart=b"
  width="100%" height="600" frameborder="0" scrolling="no" style="border:none"
  loading="lazy" title="НВО 7 клас - БЕЛ"></iframe>

Резултат:

7 клас — Само Математика (chart=m)

HTML код:

<iframe src="https://ivandavidov.github.io/nvo/7/embed.html?i7=178,179,181&chart=m"
  width="100%" height="600" frameborder="0" scrolling="no" style="border:none"
  loading="lazy" title="НВО 7 клас - Математика"></iframe>

Резултат:

7 клас — Тъмна тема (theme=dark)

HTML код:

<iframe src="https://ivandavidov.github.io/nvo/7/embed.html?i7=178,179,181&theme=dark"
  width="100%" height="1100" frameborder="0" scrolling="no" style="border:none"
  loading="lazy" title="НВО 7 клас - тъмна тема"></iframe>

Резултат:

7 клас — Исторически данни (year=2023)

HTML код:

<iframe src="https://ivandavidov.github.io/nvo/7/embed.html?i7=178,179,181&year=2023"
  width="100%" height="1100" frameborder="0" scrolling="no" style="border:none"
  loading="lazy" title="НВО 7 клас - до 2023"></iframe>

Резултат:

7 клас — Комбиниран пример (chart=b&theme=dark&year=2023)

HTML код:

<iframe src="https://ivandavidov.github.io/nvo/7/embed.html?i7=178,179&chart=b&theme=dark&year=2023"
  width="100%" height="600" frameborder="0" scrolling="no" style="border:none"
  loading="lazy" title="НВО 7 клас - БЕЛ, тъмна тема, до 2023"></iframe>

Резултат:

10 клас — Двете графики

HTML код:

<iframe src="https://ivandavidov.github.io/nvo/10/embed.html?i10=1,51"
  width="100%" height="1100" frameborder="0" scrolling="no" style="border:none"
  loading="lazy" title="НВО 10 клас"></iframe>

Резултат:

12 клас — Двете графики

HTML код:

<iframe src="https://ivandavidov.github.io/nvo/12/embed.html?i12=1,51"
  width="100%" height="1100" frameborder="0" scrolling="no" style="border:none"
  loading="lazy" title="ДЗИ 12 клас"></iframe>

Резултат:

Автоматична височина (postMessage)

Графиките са респонсивни и по двете оси — адаптират се към ширината и височината на iframe контейнера. За напълно автоматично оразмеряване на iframe-а, добавете следния скрипт на вашата страница:

<script>
window.addEventListener('message', function(e) {
  if(e.data && e.data.type === 'nvo-embed-resize') {
    var iframes = document.querySelectorAll('iframe');
    for(var i = 0; i < iframes.length; i++) {
      if(iframes[i].contentWindow === e.source) {
        iframes[i].style.height = e.data.height + 'px';
        break;
      }
    }
  }
});
</script>
Embed страниците изпращат postMessage със стойност {type: 'nvo-embed-resize', height: ...} при зареждане и при преоразмеряване. Скриптът по-горе автоматично задава височината на iframe-а спрямо реалното съдържание. Този скрипт е незадължителен — можете да използвате фиксирана височина вместо него.

Бележки

  • Графиките са интерактивни — при преминаване с мишката се показва подробна информация (година, резултат, брой ученици).
  • Графиките са респонсивни — адаптират се автоматично към ширината и височината на iframe контейнера.
  • Ако не подадете параметър за училища, ще се покажат училищата по подразбиране за съответния клас.
  • Параметърът theme има приоритет над предпочитанията на браузъра и localStorage.
  • Параметърът year показва данни до посочената година (включително). Минималната допустима година е 2020.
  • Атрибутът loading="lazy" е препоръчителен — зарежда iframe-а само когато е видим на екрана.
  • Данните се обновяват автоматично при публикуване на нови резултати от НВО/ДЗИ.
← Обратно