let pages = {
  gettingStart: {name: 'Начало работы с PixiJS', url: '01/index.html'},
  text: {name: 'Текст в PixiJS', url: '02/index.html'},
  graphics: {name: 'Фигуры в PixiJS', url: '03/index.html'},
  visibleObjects: {name: 'Видимые и невидимые объекты в PixiJS', url: '04/index.html'},
  hpBar: {name: 'Полоска здоровья', url: 'health_bar/index.html'},
};

window.onload = function() {
  let lessonsList = document.getElementById('lessonsList');

  Object.entries(pages).forEach(([key, value]) => {
    let newItem = document.createElement('li');
    newItem.appendChild(document.createTextNode(value.name));
    newItem.setAttribute('onclick', `openPage('${key}');`);

    lessonsList.appendChild(newItem);
  });
};

function openPage(item) {
  let frame = document.getElementById('examplesFrame');
  frame.src = pages[item].url;
}