Сетевой граф на основе формы Google: переструктурируем данные

Если Google Fusion Tables являются очень удобным средством визуализации данных, то одним из самых популярных средств сбора данных были и остаются формы Google. С их помощью мы можем быство собрать ответы на поставленные вопросы у десятков и сотен людей и сами Формы объединят эти ответы в таблицу. Действительно, было бы очень удобно собирать даные с помощью Формы и визуализировать их с помощью Fusion Table, используя для этого одну и ту же таблицу. Но здесь возникает проблема. Fusion Table может построить визуализацию, например, в виде графа сети, используя массив данных, подобранных в два столбца, один из которых - родительский элемент, а второй - дочерний (как, например, здесь). А Форма Google дает нам данные в “плоском” виде, записывая каждый новый ответ пользователя в новый столбец. В качестве примера возьмем результаты формы, в которой отвечающим предлагалось указать наиболее актуальные, с их точки зрения, темы сетевого взаимодействия и экспертов, обладающих уникальным знанием по этим темам.

Иными словами, для использования в Fusion Tables данные Формы нужно переструктурировать, записав их в два столбца. Делать это вручную, естественно, неудобно и неэффективно. Поэтому здесь нам на помощь приходит Google скрипт, который и проделывает эту операцию - берет данные в листе с ответами на вопросы Формы Google и записывает их в виде, удобном для визуализации в Fusion Tables.

Вот этот скрипт

	function restructure() {
	var ss = SpreadsheetApp.getActiveSpreadsheet();
	//указываем на таблицу, в которой мы работаем
	var sourceSheet = ss.getSheetByName("Form Responses 1");
	//указываем на лист, из которого берем данные
	var targetSheet = ss.getSheetByName("Sheet2");
	//указываем на лист, в который записываем данные
	var headers = sourceSheet.getRange(1, 1, 1, sourceSheet.getLastColumn()).getValues()[0];
	var rows = sourceSheet.getRange(1, 1, sourceSheet.getLastRow()).getValues();
	targetSheet.getRange("A1").setValue("source");
	targetSheet.getRange("B1").setValue("target");
	//указываем необходимые диапазоны данных
	var lastRow = targetSheet.getLastRow()
	for (j = 1; j < rows.length; j++) {
	var lastRow = targetSheet.getLastRow()
	for (i = 1; i < headers.length; i++) {
	//задаем цикл для прочтения данных в обоих листах
	switch (headers[i]) {
	case "Ваше имя":
	var target = targetSheet.getRange(lastRow+1, i);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Ключевая тема 1":
	var target = targetSheet.getRange(lastRow+1, i);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Тема 1 Эксперт 1":
	var parTarget = targetSheet.getRange(lastRow+2,1);
	sourceSheet.getRange(j+1, i).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+2, 2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Тема 1 Эксперт 2":
	var parTarget = targetSheet.getRange(lastRow+3,1);
	sourceSheet.getRange(j+1, i-1).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+3, 2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Тема 1 Эксперт 3":
	var parTarget = targetSheet.getRange(lastRow+4,1);
	sourceSheet.getRange(j+1, i-2).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+4, 2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Ключевая тема 2":
	var parTarget = targetSheet.getRange(lastRow+5,1);
	sourceSheet.getRange (j+1, i-4).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+5,2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Тема 2 Эксперт 1":
	var parTarget = targetSheet.getRange(lastRow+6,1);
	sourceSheet.getRange(j+1, i).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+6, 2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Тема 2 Эксперт 2":
	var parTarget = targetSheet.getRange(lastRow+7,1);
	sourceSheet.getRange(j+1, i-1).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+7, 2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Тема 2 Эксперт 3":
	var parTarget = targetSheet.getRange(lastRow+8,1);
	sourceSheet.getRange(j+1, i-2).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+8, 2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Ключевая тема 3":
	var parTarget = targetSheet.getRange(lastRow+9,1);
	sourceSheet.getRange (j+1, i-8).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+9,2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Тема 3 Эксперт 1":
	var parTarget = targetSheet.getRange(lastRow+10,1);
	sourceSheet.getRange(j+1, i).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+10, 2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Тема 3 Эксперт 2":
	var parTarget = targetSheet.getRange(lastRow+11,1);
	sourceSheet.getRange(j+1, i-1).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+11, 2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	case "Тема 3 Эксперт 3":
	var parTarget = targetSheet.getRange(lastRow+12,1);
	sourceSheet.getRange(j+1, i-2).copyTo(parTarget);
	var target = targetSheet.getRange(lastRow+12, 2);
	sourceSheet.getRange(j+1, i+1).copyTo(target);
	break;
	default:
	Browser.msgBox('При переносе данных произошла ошибка!', Browser.Buttons.OK_CANCEL);
	//запускаем процесс перенесения данных из первого листа во второй
	//условия, указанные в "case" должны точно соответствовать названиям столбцов
	}
	}
	}
	}

view raw restructure hosted with ❤ by GitHub

Вы можете проверить его на тестовом наборе данных, взяв за основу таблицу, прилагающуюся к форме. Для этого:

1. Скопируйте таблицу к себе на Диск

2. Зайдите в Инструменты - Редактор скриптов и запустите скрипт Restructure.

3. Авторизуйте скрипт.

4. После того, как скрипт будет исполнен, данные будут скопированы в Лист 2 таблицы в нужном для нас формате.

5. Запуститите приложение Fusion Tables и экспортируйте в него данные из Листа 2 вашей таблицы. При экспорте нужно указывать второй лист (Sheet 2).

6. Визуализируйте данные, как описано в публикации в виде сетевого графа. У вас получится примерно такая картинка.

Вы всегда можете доработать скрипт и приспособить его под свои варианты ответов формы.

Строим сетевой граф с помощью Сводных таблиц Fusion Tables

Приложение к Диску Google Сводные таблицы (Fusion Tables) по сути, представляет собой базу данных Диска Google. Установка приложения не содержит каких-либо сложностей. В интерфейсе Диска Google идем в Настройки и выбираем Управление приложениями. Далее выбираем Подключить другие приложения и в открывшемся интерфейсе находим Fusion Tables. Жмем Подключить и приложение становится доступным на нашем Диске.

Помимо процедур управления данными, инструментов формирования запросов и получения отчетов, в этот инструмент входят инструменты визуализации данных, существенно расширяющие привычный функционал Таблиц Google. Одним из таких инструментов является Граф сети (Network Graph). Для того, чтобы его построить, нам нужен массив данных, организованный в два столбца. Первый - это элемент, являющийся родительским, второй - дочерний. В качестве иллюстрации возьмем героев романа Дюма “Три мушкетера”. Массив данных мы можем создавать загрузкой csv файла с компьютера, импортом Google таблицы или просто введя данные в пустую таблицу. Воспользуемся последним способом.

В левом столбце поместим начальников, в правом подчиненным. Естественно, большинство персонажей являются одновременно начальниками по отношению к одним людям и подчиненными по отношению к другим. Получится таблица вот такого вида (она доступна по ссылке ; для работы с ней скопируйте таблицу себе на Диск Google). Обратите внимание на то, что заголовки столбцов должны быть написаны на латинице.

Теперь жмем на крестик добавления элемента интерфейса. Добавляем диаграмму (Add Chart) и в списке доступных типов диаграмм выбираем сетевой граф (Network graph). Получается граф отношений “начальник - подчиненный”.

Обратите внимание на то, что получившийся граф является динамическим - мы можем “ухватиться” за любой из его узлов и, потащив за него, перестроить граф так, как нам хочется.

Сайты Google для дистанционных курсов в школе: контроль и оценивание

Продолжение. Начало:

1. Сайты Google для дистанционных курсов в школе: требования к инструментам и контенту
2. Сайты Google для дистанционных курсов в школе: условия коммуникации и взаимодействия
3. Сайты Google для дистанционных курсов в школе: публикация работ учащихся

Контроль за действиями учащихся

Итак нам необходимо продумать формы контроля над действиями учеников. В условиях дистанционного взаимодействия для этого есть свои возможности, в чем-то, вероятно, даже более широкие, чем в "очном" обучении.

Сайты Google для дистанционных курсов в школе: публикация работ учащихся

Публикация работ учащихся

Продукты учебной деятельности учащихся составляют существенную часть учебного содержания. Они представляют ценность не только для самих учащихся, но и для учителя, который может рассматривать их как часть контента при повторном использовании сайта.

Сайты Google для дистанционных курсов в школе: условия коммуникации и взаимодействия

Условия коммуникации

Как правило, знакомство с дистанционным курсом и участие в нем начинаются с главной страницы сайта. Стараясь сильно не перегружать ее, все же необходимо помнить, что у учеников, привыкших всегда видеть учителя перед собой на протяжении всех "очных уроков", может возникать чувство, что учителя "тут" вообще нет, есть только учебные модули, контент, задания и т.д. Наша задача - сообщить ученику информацию об учителе и о его контактах, которая будет необходима ученику, чтобы связаться с ведущим курса. 

Сниппет для вставки программного кода в блоггер

Для того, чтобы опубликовать образец программного кода в блоггере, лучше воспользоваться специальным визуальным элементом для вставки - сниппетом. Делается это следующим образом:

1. Зарегистрируйтесь на https://github.com/ (если вы там еще не зарегистрированы).

2. Перейдите по ссылке https://gist.github.com/

3. Вставьте в открывшийся интерфейс свой код, добавьте к нему название и, в случае необходимости, описание.

4. Сохраните то, что у вас получилось, нажав на кнопку Create Public Gist.

5. Скопируйте ссылку на вставку кода (embed this gist).

6. В режиме правки сообщения в формате html вставьте ваш код в нужное место сообщения в Блоггере.

7. В настройках сообщения Режим редактирования выбираем Интерпретировать введенный HTML-код.

8. Сохраняем сообщение. Наш код появляется в блоге  в виде сниппета - в первозданном виде, с пронумерованными строчками и на симпатичной подложке.

	function helloWorld() {
	Browser.msgBox("А теперь получайте удовольствие от того, что получилось!");
	}

view raw Hallo World hosted with ❤ by GitHub

Иерархические нумерованные заголовки в Google Docs

Разработчики интерфейса документов Google намеренно постарались избавить его от лишних элементов. Минимализм сервиса - его безусловное достоинство. Но что делать, если для работы с текстом нужно что-то, чего в функционале документов Google не заложено? Мне, например, при работе с большими текстами очень не хватало возможности создавать иерархические нумерованные заголовки. То есть просто отметить заголовки номерами можно, но иерархию при этом создать не получится.

Но то, что иерархических нумерованных заголовки в функционале документов Google нет, не значит, что их там нельзя создавать. Создавать их можно! Для этого нам понадобится вот такой Google Apps скрипт, разработанный +Patric Rebondy.

	function addHeaderNumbering () {
	var pars = DocumentApp.getActiveDocument().getBody().getParagraphs();
	var counterHeader = [0, 0, 0, 0, 0, 0];
	for(var i=0; i<pars.length; i++) {
	var par = pars[i];
	var hdg = par.getHeading();
	if (hdg == DocumentApp.ParagraphHeading.HEADING1) {
	_addNumberingForHeaderType(DocumentApp.ParagraphHeading.HEADING1, par, 0, counterHeader);
	} else if (hdg == DocumentApp.ParagraphHeading.HEADING2) {
	_addNumberingForHeaderType(DocumentApp.ParagraphHeading.HEADING2, par, 1, counterHeader);
	} else if (hdg == DocumentApp.ParagraphHeading.HEADING3) {
	_addNumberingForHeaderType(DocumentApp.ParagraphHeading.HEADING3, par, 2, counterHeader);
	} else if (hdg == DocumentApp.ParagraphHeading.HEADING4) {
	_addNumberingForHeaderType(DocumentApp.ParagraphHeading.HEADING4, par, 3, counterHeader);
	} else if (hdg == DocumentApp.ParagraphHeading.HEADING5) {
	_addNumberingForHeaderType(DocumentApp.ParagraphHeading.HEADING5, par, 4, counterHeader);
	} else if (hdg == DocumentApp.ParagraphHeading.HEADING6) {
	_addNumberingForHeaderType(DocumentApp.ParagraphHeading.HEADING6, par, 5, counterHeader);
	}
	}
	}
	function _addNumberingForHeaderType(headerType, paragraph, initIndex, counterHeader) {
	counterHeader[initIndex] = counterHeader[initIndex] + 1;
	var currCounter = _getCurrenNumbering(initIndex, counterHeader);
	for(var ii = initIndex + 1; ii < counterHeader.length; ii++) {
	counterHeader[ii] = 0;
	}
	var content = paragraph.getText();
	var chunks = content.split('.\t')
	var result = 'ok'
	if(chunks.length > 1) {
	paragraph.setText(currCounter+'.\t'+chunks[1]);
	} else {
	paragraph.setText(currCounter+'.\t'+chunks[0]);
	}
	}
	function _getCurrenNumbering(initIndex, counterHeader) {
	var value = '';
	for ( var i = 0; i <= initIndex; i++) {
	if (value) {
	value += '.';
	}
	value += counterHeader[i];
	}
	return value;
	}

view raw Google Doc Leveled Headers hosted with ❤ by GitHub

Если вам еще не приходилось иметь дело со скриптами, то сделать нужно следующее.

1. Разметьте заголовки вашем документе как заголовки необходимого уровня. Пусть вас не смущает то, что они пока получатся не пронумерованными.

2. В рабочем документе перейдите в меню Инструменты -> Редактор скриптов.

3.. Выберите Пустой проект.

4..Скопируйте скрипт в открывшийся интерфейс редактора скриптов, нажмите Сохранить.

5. Присвойте проекту любое название, например, List.

6. В выпадающем меню доступных функций выберите addHeaderNumbering и нажмите кнопку Выполнить.

7. Вернитесь к вашему документу. Наш скрипт пронумеровал все заголовки документа иерархически!

Сайты Google для дистанционных курсов в школе: требования к инструментам и контенту

Разных моделей использования сайтов Google много, поскольку это действительно универсальный инструмент! Разговор об этом был начат давно. На сайтах и вокруг них строят сетевые проекты, используют для дистанционных учительских тренингов и МК. В школьной организации сайты широко используются в качестве "строительного материала и инструментов" для создания "виртуальных учительских", домашних страничек и онлайн-газет классов, самодельных виртуальных пособий по предмету, организации школьных и сетевых учебных проектов и т.д. Интересных применений этому инструменту найдено немало и многие из кейсов уже требуют систематизации.