Упражнения на построение диаграмм

В курсе математики четвёртого класса школьники учатся строить линейные и столбчатые диаграммы.

Пример - №175 а).

Условие задачи:

Условие задачи. В таблице 1 приведены сведения о крупнейших реках, которые целиком или частично протекают по Беларуси.
Таблица 1
Река Длина, км Длина на территории Беларуси, км
Березина226226
Неман937459
Сож648493
Припять761400
Западная Двина1020328
Днепр2201700
Постройте столбчатую диаграмму длин этих рек. Дополните сделанный рисунок столбчатой диаграммой длин этих рек на территории Беларуси, использовав прямоугольники другого цвета.

Рисование

Соответствующий фрагмент рабочей области приложения приведен на рисунке 1. При воспроизведении фильма пользователь видит чистую область построения.

Рисунок 1
Результатом нажатия на кнопку "добавить линию-1" является добавление нового столбца и поля для подписи, в котором автоматически размещается фокус ввода. Длина линии определяется положением бегунка R. Результатом нажатия на кнопку "добавить линию-2" является добавление прямоугольника ниже первого, но только в том случае, если построен хотя бы один основной столбец диаграммы (реализуется требование "дополнить" диаграмму длин рек).

Программирование

Переменные
Имя переменнойТип Область видимостиНазначение
lnumцелое числоглавная временная шкалатекущее число зелёных столбцов
rnumцелое числоглавная временная шкалатекущее число синих столбцов
lkoefдействительное числоглавная временная шкалакоэффициент. 1 : lkoef км - масштаб
diff1действительное числоглавная временная шкалапогрешность построения
l1MovieClipглавная временная шкалазелёный столбик
r1MovieClipглавная временная шкаласиний столбик
n1MovieClipглавная временная шкаласодержит поле ввода текста txt
RMovieClipглавная временная шкаласодержит кнопку Ruler с изображением бегунка

При "добавлении" столбца программа выполняет следующие действия:

При "удалении" столбца соответствующие экземпляры видеоклипов просто делаются невидимыми.

Высота столбцов диаграммы определяется положением бегунка R. Понятно, что нет необходимости перемещать его по всей плоскости, более того, пользователю будет удобнее, если бегунок сможет перемещаться лишь вдоль оси абсцисс. Поэтому, в сценарии, размещённом в экземпляре кнопки Ruler, находящемся внутри символа R1, осуществляется вызов метода startDrag() с параметрами.

Код ActionScript Где размещён? Для чего предназначен?

on (release)
{
   if (lnum<6)    //lnum не превышает шести по условию
   {
      lnum++;
// "Изображается" новый столбик
      _root["l"+lnum.toString()]._visible = true;
      _root["l"+lnum.toString()]._x = 100;
      _root["l"+lnum.toString()]._y = 284-(lnum-1)*30;
      _root["l"+lnum.toString()]._width = _root.R._x+R._width/2-100;
      _root["l"+lnum.toString()]._height = 8;
//Изображается поле ввода подписи к столбику (слева от вертикальной оси)
      _root["n"+lnum.toString()]._visible = true;
      _root["n"+lnum.toString()]._x = 2;
      _root["n"+lnum.toString()]._y = 280-(lnum-1)*30;
      Selection.setFocus("n"+lnum.toString()+".txt");
   }
}

экземпляр кнопки Add_button, обозначенный "добавить линию-1" Добавление зелёного столбика и поля ввода имени реки слева от него

on (release)
{
   if (rnum<lnum)
   {
      rnum++;
      _root["r"+rnum.toString()]._visible = true;
      _root["r"+rnum.toString()]._x = 100;
      _root["r"+rnum.toString()]._y = 292-(rnum-1)*30;
      _root["r"+rnum.toString()]._width = _root.R._x+R._width/2-100;
      _root["r"+rnum.toString()]._height = 8;
   }
}

экземпляр кнопки Add_button, обозначенный "добавить линию-2" Добавление синего столбика заданной длины под нижним "свободным" зелёным столбиком

on (release)
{
//Проверка условия: есть ли ещё видимые экземпляры видеоклипа Line1?
   if (lnum>0)
   {
      _root["l"+lnum.toString()]._visible = false;
      _root["n"+lnum.toString()]._visible = false;
      _root["n"+lnum.toString()].txt=""
      if(rnum==lnum){_root["r"+rnum.toString()]._visible = false;rnum--}
      lnum--;
      Selection.setFocus("n"+lnum.toString()+".txt");
   }
}

экземпляр кнопки Delbutton, обозначенный "убрать линию-1" Невидимыми делаются последние сверху основной столбик, поле ввода и (если существует) дополнительный столбик. Фокус ввода передаётся верхнему оставшемуся полю ввода текста

on (release)
{
   if (rnum>0)
   {
      _root["r"+rnum.toString()]._visible = false;
      rnum--;
   }
}

экземпляр кнопки Delbutton, обозначенный "убрать линию-2" Делается невидимым верхний синий столбик
on (press)   { startDrag ("_root.R", false, 100, 80, 510, 80); }
on (release)   { stopDrag (); }
экземпляр кнопки RulerПри нажатой левой кнопке мыши R перемещается внутри прямоугольника, заданного координатами верхнего левого угла (100,80) и нижнего правого угла (510,80).

onClipEvent (mouseMove)
{
   _root.CheckDiagr1();
   _root.makeAnswer();
   fscommand ("1", _root.a);
}

видеоклип RПри любом движении мыши происходит проверка ответа и передача значения переменной a

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

stop();
lnum = 0;
rnum = 0;
diff1 = 5;
lkoef = 6.25
for (i=1; i<=6; i++)
{
   _root["l"+i.toString()]._visible = false;
   _root["r"+i.toString()]._visible = false;
   _root["n"+i.toString()]._visible = false;
}
//создание массива, содержащего данные условия.
fd = new Array();
function lLines (a, b, str)
{
   this.llin = a;
   this.rlin = b;
   this.name = str;
}
function makeAnswer ()
{
   if (diff1<4) { a = 1; }
   else { a=0 }
}
function Starter ()
{
   var arr1 = new Array(226, 937, 648, 761, 1020, 2201);
   var arr2 = new Array(226, 459, 493, 500, 328, 700);
//"\377" - "я" в Flash 5 не задаётся...
   var arr4 = new Array("Березина", "Неман", "Сож", "Прип"+"\377"+"ть", "Западна"+"\377"+" Двина", "Днепр");
// fd преобразуется в трехмерный массив с полями llin, rlin, name
   for (var i = 0; i<6; i++) {fd[i] = new lLines(arr1[i], arr2[i], arr4[i]);}
}
//функция проверки правильности диаграммы
function checkDiagr1 ()
{
   diff1 = 5;
   llengths = new Array(0, 0, 0, 0, 0, 0);   // llengths - длины основных столбцов;
   rlengths = new Array(0, 0, 0, 0, 0, 0);   // rlengths - длины дополнительных столбцов
   fullchecker = 1;   //вспомогательная переменная для проверки подписей
   if ((lnum == 6)&&(rnum==6)) {   //проверка количества столбиков
      for (i=1; i<=lnum; i++) {
         for (j=0; j<6; j++) {   //формирование массивов длин
            if (_root["n"+i.toString()].txt == fd[j].name) {
               llengths[j] = _root["l"+i.toString()]._width*lkoef
               rlengths[j] = _root["r"+i.toString()]._width*lkoef
            }
         }
      }
//проверка наличия всех подписей
      for (i=0; i<6; i++)
      {
         if((llengths[i]==0)||(rlengths[i]==0)){fullchecker=0}
      }
//вычисление погрешности
      if (fullchecker != 0) {
         diff1 = 0;
         for (i=0; i<6; i++) { diff1 += Math.abs(fd[i].llin-llengths[i])+Math.abs(fd[i].rlin-rlengths[i]); }
         diff1/=50
      }
   }
}
Starter()

Условием правильности построения диаграммы является: diff1<4.

Просмотреть результат в новом окне


Назад
К содержанию
Далее